clean up

cardstack · Feb 19, 2025 · ea809a9 · ea809a9
1 parent 6ad3994
commit ea809a9
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 17 deletions.
diff --git a/packages/experiments-realm/Review/7f3c8694-7fa8-41d6-a449-14337c51fa29.json b/packages/experiments-realm/Review/7f3c8694-7fa8-41d6-a449-14337c51fa29.json
@@ -3,7 +3,7 @@
     "type": "card",
     "attributes": {
       "rating": {
-        "average": 3,
+        "average": 4.5,
         "count": null,
         "isEditable": false
       },

diff --git a/packages/host/app/services/store.ts b/packages/host/app/services/store.ts
@@ -19,6 +19,7 @@ import {
   type CardDef,
   type IdentityContext,
 } from 'https://cardstack.com/base/card-api';
+import type * as CardAPI from 'https://cardstack.com/base/card-api';
 
 import EnvironmentService from './environment-service';
 
@@ -100,6 +101,7 @@ export default class StoreService extends Service {
   > = new Map();
   private autoSaveStates: TrackedWeakMap<CardDef, AutoSaveState> =
     new TrackedWeakMap();
+  private cardApiCache?: typeof CardAPI;
 
   unloadResource(resource: CardResource) {
     let id = resource.url;
@@ -112,17 +114,20 @@ export default class StoreService extends Service {
       const index = resources.findIndex(
         (s) => s.resourceState.resource === resource,
       );
-      let { onCardChange } = resources[index]?.resourceState || {};
-      if (onCardChange && resource.card) {
-        let autoSaveState = this.getAutoSaveState(resource.card);
-        if (autoSaveState?.hasUnsavedChanges) {
-          this.saveCard.perform(resource.card);
-        }
-
-        resource.api.unsubscribeFromChanges(resource.card, onCardChange);
-      }
 
       if (index > -1) {
+        let { onCardChange } = resources[index].resourceState;
+        if (onCardChange && resource.card) {
+          let autoSaveState = this.getAutoSaveState(resource.card);
+          if (autoSaveState?.hasUnsavedChanges) {
+            this.saveCard.perform(resource.card);
+          }
+          let card = this.identityContext.get(id);
+
+          if (this.cardApiCache && card) {
+            this.cardApiCache?.unsubscribeFromChanges(card, onCardChange);
+          }
+        }
         resources.splice(index, 1);
       }
       if (resources.length === 0) {
@@ -311,7 +316,9 @@ export default class StoreService extends Service {
     }
 
     if (maybeUpdatedCard?.id) {
-      let api = await this.cardService.getAPI();
+      if (!this.cardApiCache) {
+        this.cardApiCache = await this.cardService.getAPI();
+      }
       for (let subscriber of this.subscribers.get(maybeUpdatedCard.id)
         ?.resources ?? []) {
         let onCardChange = subscriber.resourceState.onCardChange;
@@ -320,12 +327,12 @@ export default class StoreService extends Service {
         }
         let autoSaveState;
         if (oldCard) {
-          api.unsubscribeFromChanges(oldCard, onCardChange);
+          this.cardApiCache.unsubscribeFromChanges(oldCard, onCardChange);
           autoSaveState = this.autoSaveStates.get(oldCard);
           this.autoSaveStates.delete(oldCard);
         }
         if (isCardInstance(maybeUpdatedCard)) {
-          api.subscribeToChanges(maybeUpdatedCard, onCardChange);
+          this.cardApiCache.subscribeToChanges(maybeUpdatedCard, onCardChange);
           if (autoSaveState) {
             this.autoSaveStates.set(maybeUpdatedCard, autoSaveState);
           }

diff --git a/packages/host/tests/acceptance/code-submode/playground-test.gts b/packages/host/tests/acceptance/code-submode/playground-test.gts
@@ -1,5 +1,7 @@
 import { click } from '@ember/test-helpers';
 
+import { fillIn } from '@ember/test-helpers';
+
 import window from 'ember-window-mock';
 import { module, test } from 'qunit';
 
@@ -14,22 +16,28 @@ import {
   setupAcceptanceTestRealm,
   setupLocalIndexing,
   setupServerSentEvents,
+  setupOnSave,
+  setupUserSubscription,
   testRealmURL,
   visitOperatorMode,
   type TestContextWithSSE,
+  type TestContextWithSave,
 } from '../../helpers';
 import { setupMockMatrix } from '../../helpers/mock-matrix';
 import { setupApplicationTest } from '../../helpers/setup';
 
+let matrixRoomId: string;
 module('Acceptance | code-submode | playground panel', function (hooks) {
   let realm: Realm;
   setupApplicationTest(hooks);
   setupLocalIndexing(hooks);
   setupServerSentEvents(hooks);
-  setupMockMatrix(hooks, {
-    loggedInAs: '@testuser:staging',
-    activeRealms: [testRealmURL],
-  });
+  let { setRealmPermissions, setActiveRealms, createAndJoinRoom } =
+    setupMockMatrix(hooks, {
+      loggedInAs: '@testuser:staging',
+      activeRealms: [testRealmURL],
+    });
+  setupOnSave(hooks);
 
   const authorCard = `import { contains, field, CardDef, Component } from "https://cardstack.com/base/card-api";
 import MarkdownField from 'https://cardstack.com/base/markdown';
@@ -117,7 +125,11 @@ export class BlogPost extends CardDef {
 }`;
 
   hooks.beforeEach(async function () {
+    matrixRoomId = createAndJoinRoom('@testuser:staging', 'room-test');
+    setupUserSubscription(matrixRoomId);
+
     ({ realm } = await setupAcceptanceTestRealm({
+      realmURL: testRealmURL,
       contents: {
         'author.gts': authorCard,
         'blog-post.gts': blogPostCard,
@@ -235,6 +247,11 @@ export class BlogPost extends CardDef {
       ]),
     );
     window.localStorage.setItem(PlaygroundSelections, '');
+
+    setActiveRealms([testRealmURL]);
+    setRealmPermissions({
+      [testRealmURL]: ['read', 'write'],
+    });
   });
 
   test('can render playground panel when a card def is selected', async function (assert) {
@@ -839,4 +856,28 @@ export class BlogPost extends CardDef {
       }),
     );
   });
+
+  test<TestContextWithSave>('trigger auto saved in edit format', async function (assert) {
+    await visitOperatorMode({
+      submode: 'code',
+      codePath: `${testRealmURL}author.gts`,
+    });
+    await click('[data-test-accordion-item="playground"] button');
+    await click('[data-test-instance-chooser]');
+    await click('[data-option-index="0"]');
+    await click('[data-test-edit-button]');
+    assert.dom('[data-test-card-format="edit"]').exists();
+
+    let newFirstName = 'John';
+    this.onSave((_, json) => {
+      if (typeof json === 'string') {
+        throw new Error('expected JSON save data');
+      }
+      assert.strictEqual(json.data.attributes?.firstName, newFirstName);
+    });
+    await fillIn(
+      '[data-test-field="firstName"] [data-test-boxel-input]',
+      newFirstName,
+    );
+  });
 });