Merge pull request #1992 from cardstack/cs-7710-cannot-create-new-card-when-2-stack-items-are-opened

Use CardResource to create card instances on the host

Author: habdelra

packages/host/app/commands/show-card.ts

@@ -32,7 +32,7 @@ export default class ShowCardCommand extends HostBaseCommand<
       1,
     );
     let newStackItem = await this.operatorModeStateService.createStackItem(
-      input.cardToShow,
+      new URL(input.cardToShow.id),
       newStackIndex,
     );
     this.operatorModeStateService.addItemToStack(newStackItem);

packages/host/app/components/operator-mode/card-preview-panel/index.gts

@@ -93,7 +93,9 @@ export default class CardPreviewPanel extends Component<Signature> {
   }
 
   openInInteractMode = task(async () => {
-    await this.operatorModeStateService.openCardInInteractMode(this.args.card);
+    await this.operatorModeStateService.openCardInInteractMode(
+      new URL(this.args.card.id),
+    );
   });
 
   <template>

packages/host/app/components/operator-mode/copy-button.gts

@@ -32,10 +32,6 @@ const LEFT = 0;
 const RIGHT = 1;
 
 export default class CopyButton extends Component<Signature> {
-  @service declare loaderService: LoaderService;
-  @service declare cardService: CardService;
-  @service declare operatorModeStateService: OperatorModeStateService;
-
   <template>
     {{#if (gt this.stacks.length 1)}}
       {{#if this.state}}
@@ -102,15 +98,19 @@ export default class CopyButton extends Component<Signature> {
     </style>
   </template>
 
-  get stacks() {
+  @service private declare loaderService: LoaderService;
+  @service private declare cardService: CardService;
+  @service private declare operatorModeStateService: OperatorModeStateService;
+
+  private get stacks() {
     return this.operatorModeStateService.state?.stacks ?? [];
   }
 
-  get buttonKind() {
+  private get buttonKind() {
     return this.args.isCopying ? 'primary-dark' : 'primary';
   }
 
-  get state() {
+  private get state() {
     // Need to have 2 stacks in order for a copy button to exist
     if (this.stacks.length < 2) {
       return undefined;

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

@@ -198,30 +198,28 @@ export default class InteractSubmode extends Component<Signature> {
           doc.data.meta.realmURL = opts.realmURL.href;
         }
 
-        let newCard = await here.cardService.createFromSerialized(
-          doc.data,
-          doc,
-          relativeTo,
-        );
-
         let newItem = new StackItem({
           owner: here,
-          card: newCard,
+          newCard: { doc, relativeTo },
           format: opts?.cardModeAfterCreation ?? 'edit',
           request: new Deferred(),
           isLinkedCard: opts?.isLinkedCard,
           stackIndex,
         });
 
-        // TODO: it is important saveModel happens after newItem because it
-        // looks like perhaps there is a race condition (or something else) when a
-        // new linked card is created, and when it is added to the stack and closed
-        // - the parent card is not updated with the new linked card
-        await here.cardService.saveModel(newCard);
-
         await newItem.ready();
+        if (newItem.cardError) {
+          console.error(
+            `Encountered error creating card:\n${JSON.stringify(
+              doc,
+              null,
+              2,
+            )}\nError: ${JSON.stringify(newItem.cardError, null, 2)}`,
+          );
+          return undefined;
+        }
         here.addToStack(newItem);
-        return newCard;
+        return newItem.card;
       },
       viewCard: async (
         cardOrURL: CardDef | URL,
@@ -233,9 +231,7 @@ export default class InteractSubmode extends Component<Signature> {
         }
         let newItem = new StackItem({
           owner: here,
-          ...(cardOrURL instanceof URL
-            ? { url: cardOrURL }
-            : { card: cardOrURL }),
+          url: cardOrURL instanceof URL ? cardOrURL : new URL(cardOrURL.id),
           format,
           stackIndex,
         });
@@ -561,19 +557,25 @@ export default class InteractSubmode extends Component<Signature> {
   private openSelectedSearchResultInStack = restartableTask(
     async (cardId: string) => {
       let waiterToken = waiter.beginAsync();
+      let url = new URL(cardId);
       try {
         let searchSheetTrigger = this.searchSheetTrigger; // Will be set by showSearchWithTrigger
-        let card = await this.cardService.getCard(cardId);
-        if (!card) {
-          return;
-        }
 
         // In case the left button was clicked, whatever is currently in stack with index 0 will be moved to stack with index 1,
         // and the card will be added to stack with index 0. shiftStack executes this logic.
         if (
           searchSheetTrigger ===
           SearchSheetTriggers.DropCardToLeftNeighborStackButton
         ) {
+          let newItem = new StackItem({
+            owner: this,
+            url,
+            format: 'isolated',
+            stackIndex: 0,
+          });
+          // it's important that we await the stack item readiness _before_
+          // we mutate the stack, otherwise there are very odd visual artifacts
+          await newItem.ready();
           for (
             let stackIndex = this.stacks.length - 1;
             stackIndex >= 0;
@@ -584,15 +586,14 @@ export default class InteractSubmode extends Component<Signature> {
               stackIndex + 1,
             );
           }
-          await this.publicAPI(this, 0).viewCard(card, 'isolated');
-
+          this.addToStack(newItem);
           // In case the right button was clicked, the card will be added to stack with index 1.
         } else if (
           searchSheetTrigger ===
           SearchSheetTriggers.DropCardToRightNeighborStackButton
         ) {
           await this.publicAPI(this, this.stacks.length).viewCard(
-            card,
+            url,
             'isolated',
           );
         } else {
@@ -606,15 +607,15 @@ export default class InteractSubmode extends Component<Signature> {
             numberOfStacks === 0 ||
             this.operatorModeStateService.stackIsEmpty(stackIndex)
           ) {
-            await this.publicAPI(this, 0).viewCard(card, 'isolated');
+            await this.publicAPI(this, 0).viewCard(url, 'isolated');
           } else {
             stack = this.operatorModeStateService.rightMostStack();
             if (stack) {
               let bottomMostItem = stack[0];
               if (bottomMostItem) {
                 let stackItem = new StackItem({
                   owner: this,
-                  card,
+                  url,
                   format: 'isolated',
                   stackIndex,
                 });

packages/host/app/components/operator-mode/overlays.gts

@@ -36,7 +36,6 @@ import type CardService from '@cardstack/host/services/card-service';
 import RealmService from '@cardstack/host/services/realm';
 
 import type { Format } from 'https://cardstack.com/base/card-api';
-import { CardDef } from 'https://cardstack.com/base/card-api';
 
 import { removeFileExtension } from '../search-sheet/utils';
 
@@ -548,23 +547,9 @@ export default class OperatorModeOverlays extends Component<Signature> {
     ) => {
       let cardId =
         typeof cardDefOrId === 'string' ? cardDefOrId : cardDefOrId.id;
-
       let canWrite = this.realm.canWrite(cardId);
-
       format = canWrite ? format : 'isolated';
-
-      let card: CardDef | undefined;
-      try {
-        if (typeof cardDefOrId === 'string') {
-          card = await this.cardService.getCard(cardId);
-        } else {
-          card = cardDefOrId;
-        }
-      } catch (e) {
-        console.error(`can't load card: ${cardId}`);
-      }
-
-      await this.args.publicAPI.viewCard(card ?? new URL(cardId), format, {
+      await this.args.publicAPI.viewCard(new URL(cardId), format, {
         fieldType,
         fieldName,
       });

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

@@ -1,19 +1,21 @@
-import { type Deferred, apiFor } from '@cardstack/runtime-common';
+import {
+  type Deferred,
+  type LooseSingleCardDocument,
+} from '@cardstack/runtime-common';
 
 import {
   type CardResource,
   getCard,
 } from '@cardstack/host/resources/card-resource';
 
 import type { CardDef, Format } from 'https://cardstack.com/base/card-api';
-import type * as CardAPI from 'https://cardstack.com/base/card-api';
 
 interface Args {
   format: Format;
   owner: object;
   request?: Deferred<CardDef | undefined>;
   stackIndex: number;
-  card?: CardDef;
+  newCard?: { doc: LooseSingleCardDocument; relativeTo: URL | undefined };
   url?: URL;
   cardResource?: CardResource;
   isLinkedCard?: boolean; // TODO: consider renaming this so its clearer that we use this for being able to tell whether the card needs to be closed after saving
@@ -25,39 +27,32 @@ export class StackItem {
   stackIndex: number;
   isLinkedCard?: boolean; // TODO: consider renaming this so its clearer that we use this for being able to tell whether the card needs to be closed after saving
   private owner: object;
-  private newCard?: CardDef;
   private cardResource?: CardResource;
-  private newCardApiPromise: Promise<typeof CardAPI> | undefined;
-  private newCardApi: typeof CardAPI | undefined;
 
   constructor(args: Args) {
     let {
       format,
       request,
       stackIndex,
-      card,
+      newCard,
       url,
       cardResource,
       isLinkedCard,
       owner,
     } = args;
-    if (!card && !cardResource && !url) {
+    if (!newCard && !cardResource && !url) {
       throw new Error(
-        `Cannot create a StackItem without a 'card' or a 'cardResource' or a 'url'`,
+        `Cannot create a StackItem without a 'newCard' or a 'cardResource' or a 'url'`,
       );
     }
     if (cardResource) {
       this.cardResource = cardResource;
-    } else if (card?.id) {
-      // if the card is not actually new--load a resource instead
-      this.cardResource = getCard(owner, () => card!.id);
     } else if (url) {
       this.cardResource = getCard(owner, () => url!.href);
-    } else if (card) {
-      this.newCard = card;
-      this.newCardApiPromise = apiFor(this.card).then(
-        (api) => (this.newCardApi = api),
-      );
+    } else if (newCard) {
+      this.cardResource = getCard(owner, () => newCard!.doc, {
+        relativeTo: newCard.relativeTo,
+      });
     }
 
     this.format = format;
@@ -68,16 +63,11 @@ export class StackItem {
   }
 
   get url() {
-    return (
-      (this.cardResource?.url ? new URL(this.cardResource.url) : undefined) ??
-      (this.newCard?.id ? new URL(this.newCard.id) : undefined)
-    );
+    return this.cardResource?.url ? new URL(this.cardResource.url) : undefined;
   }
 
   get card(): CardDef {
-    if (this.newCard) {
-      return this.newCard;
-    } else if (this.cardResource) {
+    if (this.cardResource) {
       if (!this.cardResource.card) {
         throw new Error(`The CardResource for this StackItem has no card set`);
       }
@@ -88,9 +78,7 @@ export class StackItem {
   }
 
   get title() {
-    if (this.newCard) {
-      return this.newCard.title;
-    } else if (this.cardResource?.card) {
+    if (this.cardResource?.card) {
       return this.cardResource.card.title;
     }
     return undefined;
@@ -127,7 +115,7 @@ export class StackItem {
   }
 
   get api() {
-    let api = this.cardResource?.api ?? this.newCardApi;
+    let api = this.cardResource?.api;
     if (!api) {
       throw new Error(
         `API for stack item is not available yet--use this.ready() to wait for API availability`,
@@ -137,22 +125,14 @@ export class StackItem {
   }
 
   async ready() {
-    await Promise.all([this.cardResource?.loaded, this.newCardApiPromise]);
+    await this.cardResource?.loaded;
   }
 
   clone(args: Partial<Args>) {
-    let {
-      card,
-      format,
-      request,
-      isLinkedCard,
-      owner,
-      cardResource,
-      stackIndex,
-    } = this;
+    let { format, request, isLinkedCard, owner, cardResource, stackIndex } =
+      this;
     return new StackItem({
       cardResource,
-      card,
       format,
       request,
       isLinkedCard,