Playground instance previewed in edit view should save changes (#2165)

Author: FadhlanR

packages/host/app/components/operator-mode/code-submode.gts

@@ -10,7 +10,7 @@ import { isTesting } from '@embroider/macros';
 import Component from '@glimmer/component';
 import { tracked, cached } from '@glimmer/tracking';
 
-import { dropTask, restartableTask, timeout, all } from 'ember-concurrency';
+import { dropTask, restartableTask, timeout } from 'ember-concurrency';
 
 import perform from 'ember-concurrency/helpers/perform';
 
@@ -158,12 +158,10 @@ export default class CodeSubmode extends Component<Signature> {
   @tracked private isCreateModalOpen = false;
   @tracked private itemToDelete: CardDef | URL | null | undefined;
 
-  private hasUnsavedCardChanges = false;
   private defaultPanelWidths: PanelWidths;
   private defaultPanelHeights: PanelHeights;
   private updateCursorByName: ((name: string) => void) | undefined;
   private panelSelections: Record<string, SelectedAccordionItem>;
-  #currentCard: CardDef | undefined;
 
   private createFileModal: CreateFileModal | undefined;
   private cardResource = getCard(
@@ -178,7 +176,7 @@ export default class CodeSubmode extends Component<Signature> {
       return url;
     },
     {
-      onCardInstanceChange: () => this.onCardLoaded,
+      isAutoSave: () => true,
     },
   );
   private moduleContentsResource = moduleContentsResource(
@@ -236,18 +234,6 @@ export default class CodeSubmode extends Component<Signature> {
         : defaultPanelHeights;
 
     registerDestructor(this, () => {
-      // destructor functons are called synchronously. in order to save,
-      // which is async, we leverage an EC task that is running in a
-      // parent component (EC task lifetimes are bound to their context)
-      // that is not being destroyed.
-      if (this.hasUnsavedCardChanges && this.#currentCard) {
-        // we use this.#currentCard here instead of this.card because in
-        // the destructor we no longer have access to resources bound to
-        // this component since they are destroyed first, so this.#currentCard
-        // is something we copy from the card resource when it changes so that
-        // we have access to it in the destructor
-        this.args.saveCardOnClose(this.#currentCard);
-      }
       this.operatorModeStateService.unsubscribeFromOpenFileStateChanges(this);
     });
   }
@@ -450,26 +436,6 @@ export default class CodeSubmode extends Component<Signature> {
     }
   }
 
-  private onCardLoaded = (
-    oldCard: CardDef | undefined,
-    newCard: CardDef | undefined,
-  ) => {
-    // this handles the scenario for the initial load, as well as unloading a
-    // card that went into an error state or was deleted
-    if (oldCard !== newCard) {
-      if (oldCard) {
-        this.cardResource.api.unsubscribeFromChanges(
-          oldCard,
-          this.onCardChange,
-        );
-      }
-      if (newCard) {
-        this.cardResource.api.subscribeToChanges(newCard, this.onCardChange);
-      }
-    }
-    this.#currentCard = newCard;
-  };
-
   private get declarations() {
     return this.moduleContentsResource?.declarations;
   }
@@ -541,25 +507,6 @@ export default class CodeSubmode extends Component<Signature> {
     );
   }
 
-  private onCardChange = () => {
-    this.initiateAutoSaveTask.perform();
-  };
-
-  private initiateAutoSaveTask = restartableTask(async () => {
-    if (this.card) {
-      this.hasUnsavedCardChanges = true;
-      await timeout(this.environmentService.autoSaveDelayMs);
-      await this.saveCard.perform(this.card);
-      this.hasUnsavedCardChanges = false;
-    }
-  });
-
-  private saveCard = restartableTask(async (card: CardDef) => {
-    // these saves can happen so fast that we'll make sure to wait at
-    // least 500ms for human consumption
-    await all([this.cardService.saveModel(card), timeout(500)]);
-  });
-
   private loadScopedCSS = restartableTask(async () => {
     if (this.cardError?.meta.scopedCssUrls) {
       await Promise.all(
@@ -571,7 +518,9 @@ export default class CodeSubmode extends Component<Signature> {
   });
 
   private get isSaving() {
-    return this.sourceFileIsSaving || this.saveCard.isRunning;
+    return (
+      this.sourceFileIsSaving || !!this.cardResource.autoSaveState?.isSaving
+    );
   }
 
   @action
@@ -818,7 +767,7 @@ export default class CodeSubmode extends Component<Signature> {
         data-test-code-mode
         data-test-save-idle={{and
           (not this.sourceFileIsSaving)
-          this.initiateAutoSaveTask.isIdle
+          (not this.cardResource.autoSaveState.isSaving)
         }}
       >
         <div class='code-mode-top-bar'>

packages/host/app/components/operator-mode/code-submode/playground-panel.gts

@@ -214,6 +214,7 @@ class PlaygroundPanelContent extends Component<PlaygroundContentSignature> {
                   @cardTypeDisplayName={{cardTypeDisplayName this.card}}
                   @cardTypeIcon={{cardTypeIcon this.card}}
                   @realmInfo={{realmInfo}}
+                  @onEdit={{if this.canEdit this.setEditFormat}}
                   @isTopCard={{true}}
                   @moreOptionsMenuItems={{this.contextMenuItems}}
                 />
@@ -411,6 +412,7 @@ class PlaygroundPanelContent extends Component<PlaygroundContentSignature> {
   private cardResource = getCard(
     this,
     () => this.playgroundSelections[this.args.moduleId]?.cardId,
+    { isAutoSave: () => true },
   );
 
   private get card(): CardDef | undefined {
@@ -485,6 +487,22 @@ class PlaygroundPanelContent extends Component<PlaygroundContentSignature> {
       this.persistSelections(chosenCard.id);
     }
   });
+
+  private get canEdit() {
+    return (
+      this.format !== 'edit' &&
+      this.card?.id &&
+      this.realm.canWrite(this.card.id)
+    );
+  }
+
+  @action
+  private setEditFormat() {
+    if (!this.card?.id) {
+      return;
+    }
+    this.persistSelections(this.card.id, 'edit');
+  }
 }
 
 interface Signature {

packages/host/app/components/operator-mode/code-submode/spec-preview.gts

@@ -12,7 +12,7 @@ import DotIcon from '@cardstack/boxel-icons/dot';
 
 import LayoutList from '@cardstack/boxel-icons/layout-list';
 import StackIcon from '@cardstack/boxel-icons/stack';
-import { task, restartableTask, timeout, all } from 'ember-concurrency';
+import { task } from 'ember-concurrency';
 
 import {
   BoxelButton,
@@ -54,8 +54,6 @@ import OperatorModeStateService from '@cardstack/host/services/operator-mode-sta
 import RealmService from '@cardstack/host/services/realm';
 import type RealmServerService from '@cardstack/host/services/realm-server';
 
-import type { CardDef } from 'https://cardstack.com/base/card-api';
-
 import { Spec, type SpecType } from 'https://cardstack.com/base/spec';
 
 import type { WithBoundArgs } from '@glint/template';
@@ -482,7 +480,7 @@ export default class SpecPreview extends GlimmerComponent<Signature> {
   }
 
   private cardResource = getCard(this, () => this.selectedId, {
-    onCardInstanceChange: () => this.onCardLoaded,
+    isAutoSave: () => true,
   });
 
   get card() {
@@ -492,35 +490,6 @@ export default class SpecPreview extends GlimmerComponent<Signature> {
     return this.cardResource.card as Spec;
   }
 
-  private onCardLoaded = (
-    oldCard: CardDef | undefined,
-    newCard: CardDef | undefined,
-  ) => {
-    if (oldCard) {
-      this.cardResource.api.unsubscribeFromChanges(oldCard, this.onCardChange);
-    }
-    if (newCard) {
-      this.cardResource.api.subscribeToChanges(newCard, this.onCardChange);
-    }
-  };
-
-  private onCardChange = () => {
-    this.initiateAutoSaveTask.perform();
-  };
-
-  private initiateAutoSaveTask = restartableTask(async () => {
-    if (this.card) {
-      await timeout(this.environmentService.autoSaveDelayMs);
-      await this.saveCard.perform(this.card);
-    }
-  });
-
-  private saveCard = restartableTask(async (card: Spec) => {
-    // these saves can happen so fast that we'll make sure to wait at
-    // least 500ms for human consumption
-    await all([this.cardService.saveModel(card), timeout(500)]);
-  });
-
   get specType() {
     return this.card?.specType as SpecType;
   }

packages/host/app/components/operator-mode/stack-item.gts

@@ -1,4 +1,3 @@
-import { registerDestructor } from '@ember/destroyable';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
@@ -14,9 +13,7 @@ import Component from '@glimmer/component';
 import { tracked, cached } from '@glimmer/tracking';
 
 import ExclamationCircle from '@cardstack/boxel-icons/exclamation-circle';
-import { formatDistanceToNow } from 'date-fns';
 import {
-  task,
   restartableTask,
   timeout,
   waitForProperty,
@@ -124,18 +121,11 @@ export default class OperatorModeStackItem extends Component<Signature> {
 
   // @tracked private selectedCards = new TrackedArray<CardDef>([]);
   @tracked private selectedCards = new TrackedArray<CardDefOrId>([]);
-  @tracked private isSaving = false;
   @tracked private animationType:
     | 'opening'
     | 'closing'
     | 'movingForward'
     | undefined = 'opening';
-  @tracked private hasUnsavedChanges = false;
-  @tracked private lastSaved: number | undefined;
-  @tracked private lastSavedMsg: string | undefined;
-  @tracked private lastSaveError: Error | undefined;
-  private refreshSaveMsg: number | undefined;
-  private subscribedCard: CardDef | undefined;
   private contentEl: HTMLElement | undefined;
   private containerEl: HTMLElement | undefined;
   private itemEl: HTMLElement | undefined;
@@ -162,7 +152,6 @@ export default class OperatorModeStackItem extends Component<Signature> {
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args);
     this.loadCard.perform();
-    this.subscribeToCard.perform();
     this.args.setupStackItem(this.args.item, {
       clearSelections: this.clearSelections,
       doWithStableScroll: this.doWithStableScroll.perform,
@@ -376,86 +365,12 @@ export default class OperatorModeStackItem extends Component<Signature> {
     }
   });
 
-  private subscribeToCard = task(async () => {
-    await this.args.item.ready();
-    // TODO how do we make sure that this is called after the error is cleared?
-    // Address this as part of SSE support for card errors
-    if (!this.cardError) {
-      this.subscribedCard = this.card;
-      let api = this.args.item.api;
-      registerDestructor(this, this.cleanup);
-      api.subscribeToChanges(this.subscribedCard, this.onCardChange);
-      this.refreshSaveMsg = setInterval(
-        () => this.calculateLastSavedMsg(),
-        10 * 1000,
-      ) as unknown as number;
-    }
-  });
-
-  private cleanup = () => {
-    if (this.subscribedCard) {
-      let api = this.args.item.api;
-      api.unsubscribeFromChanges(this.subscribedCard, this.onCardChange);
-      clearInterval(this.refreshSaveMsg);
-    }
-  };
-
-  private onCardChange = () => {
-    this.initiateAutoSaveTask.perform();
-  };
-
-  private initiateAutoSaveTask = restartableTask(async () => {
-    this.hasUnsavedChanges = true;
-    await timeout(this.environmentService.autoSaveDelayMs);
-    try {
-      this.isSaving = true;
-      this.lastSaveError = undefined;
-      await timeout(25);
-      await this.args.saveCard(this.card);
-      this.hasUnsavedChanges = false;
-      this.lastSaved = Date.now();
-    } catch (error) {
-      // error will already be logged in CardService
-      this.lastSaveError = error as Error;
-    } finally {
-      this.isSaving = false;
-      this.calculateLastSavedMsg();
-    }
-  });
-
-  private calculateLastSavedMsg() {
-    let savedMessage: string | undefined;
-    if (this.lastSaveError) {
-      savedMessage = `Failed to save: ${this.getErrorMessage(
-        this.lastSaveError,
-      )}`;
-    } else if (this.lastSaved) {
-      savedMessage = `Saved ${formatDistanceToNow(this.lastSaved, {
-        addSuffix: true,
-      })}`;
-    }
-    // runs frequently, so only change a tracked property if the value has changed
-    if (this.lastSavedMsg != savedMessage) {
-      this.lastSavedMsg = savedMessage;
-    }
-  }
-
-  private getErrorMessage(error: Error) {
-    if ((error as any).responseHeaders?.get('x-blocked-by-waf-rule')) {
-      return 'Rejected by firewall';
-    }
-    if (error.message) {
-      return error.message;
-    }
-    return 'Unknown error';
-  }
-
   private doneEditing = restartableTask(async () => {
     let item = this.args.item;
     let { request } = item;
     // if the card is actually different do the save and dismiss, otherwise
     // just change the stack item's format to isolated
-    if (this.hasUnsavedChanges) {
+    if (item.autoSaveState?.hasUnsavedChanges) {
       // we dont want to have the user wait for the save to complete before
       // dismissing edit mode so intentionally not awaiting here
       let updatedCard = await this.args.saveCard(item.card);
@@ -675,9 +590,9 @@ export default class OperatorModeStackItem extends Component<Signature> {
             <CardHeader
               @cardTypeDisplayName={{this.headerTitle}}
               @cardTypeIcon={{cardTypeIcon @item.card}}
-              @isSaving={{this.isSaving}}
+              @isSaving={{@item.autoSaveState.isSaving}}
               @isTopCard={{this.isTopCard}}
-              @lastSavedMessage={{this.lastSavedMsg}}
+              @lastSavedMessage={{@item.autoSaveState.lastSavedErrorMsg}}
               @moreOptionsMenuItems={{this.moreOptionsMenuItems}}
               @realmInfo={{realmInfo}}
               @onEdit={{if this.canEdit (fn @publicAPI.editCard this.card)}}

packages/host/app/lib/stack-item.ts

@@ -48,10 +48,13 @@ export class StackItem {
     if (cardResource) {
       this.cardResource = cardResource;
     } else if (url) {
-      this.cardResource = getCard(owner, () => url!.href);
+      this.cardResource = getCard(owner, () => url!.href, {
+        isAutoSave: () => true,
+      });
     } else if (newCard) {
       this.cardResource = getCard(owner, () => newCard!.doc, {
         relativeTo: newCard.relativeTo,
+        isAutoSave: () => true,
       });
     }
 
@@ -77,6 +80,10 @@ export class StackItem {
     throw new Error(`This StackItem has no card set`);
   }
 
+  get autoSaveState() {
+    return this.cardResource?.autoSaveState;
+  }
+
   get title() {
     if (this.cardResource?.card) {
       return this.cardResource.card.title;