Basic ability to choose a file for a linksTo(FileDef) field

Author: lukemelia

packages/base/card-api.gts

@@ -1318,9 +1318,8 @@ class LinksTo<CardT extends LinkableDefConstructor> implements Field<CardT> {
       format: Format | undefined,
       defaultFormat: Format,
       isComputed: boolean,
-      isFileDef: boolean,
     ) {
-      return (format ?? defaultFormat) === 'edit' && !isComputed && !isFileDef;
+      return (format ?? defaultFormat) === 'edit' && !isComputed;
     }
     function getChildFormat(
       format: Format | undefined,
@@ -1354,9 +1353,7 @@ class LinksTo<CardT extends LinkableDefConstructor> implements Field<CardT> {
         <CardCrudFunctionsConsumer as |cardCrudFunctions|>
           <DefaultFormatsConsumer as |defaultFormats|>
             {{#if
-              (shouldRenderEditor
-                @format defaultFormats.cardDef isComputed isFileDef
-              )
+              (shouldRenderEditor @format defaultFormats.cardDef isComputed)
             }}
               <LinksToEditor
                 @model={{(getInnerModel)}}

packages/base/links-to-editor.gts

@@ -10,16 +10,17 @@ import {
   getBoxComponent,
 } from './field-component';
 import {
-  type CardDef,
   type BaseDef,
   type Box,
   type Field,
   type CardContext,
   type LinkableDefConstructor,
   CreateCardFn,
+  isFileDefConstructor,
 } from './card-api';
 import {
   chooseCard,
+  chooseFile,
   baseCardRef,
   identifyCard,
   CardContextName,
@@ -37,7 +38,7 @@ import { hash } from '@ember/helper';
 interface Signature {
   Element: HTMLElement;
   Args: {
-    model: Box<CardDef | null>;
+    model: Box<BaseDef | null>;
     field: Field<LinkableDefConstructor>;
     typeConstraint?: ResolvedCodeRef;
     createCard?: CreateCardFn;
@@ -166,6 +167,14 @@ export class LinksToEditor extends GlimmerComponent<Signature> {
   }
 
   private chooseCard = restartableTask(async () => {
+    if (isFileDefConstructor(this.args.field.card as typeof BaseDef)) {
+      let file = await chooseFile();
+      if (file) {
+        this.args.model.value = file;
+      }
+      return;
+    }
+
     let type = identifyCard(this.args.field.card) ?? baseCardRef;
     if (this.args.typeConstraint) {
       type = await getNarrowestType(this.args.typeConstraint, type, myLoader());

packages/host/app/components/operator-mode/choose-file-modal.gts

@@ -20,14 +20,14 @@ import {
   Deferred,
   RealmPaths,
   type LocalPath,
+  isCardErrorJSONAPI,
 } from '@cardstack/runtime-common';
 
 import ModalContainer from '@cardstack/host/components/modal-container';
 
-import type MatrixService from '@cardstack/host/services/matrix-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
-
 import type RealmService from '@cardstack/host/services/realm';
+import type StoreService from '@cardstack/host/services/store';
 
 import type { FileDef } from 'https://cardstack.com/base/file-api';
 
@@ -44,7 +44,7 @@ export default class ChooseFileModal extends Component<Signature> {
 
   @service private declare operatorModeStateService: OperatorModeStateService;
   @service private declare realm: RealmService;
-  @service private declare matrixService: MatrixService;
+  @service private declare store: StoreService;
 
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args);
@@ -72,13 +72,15 @@ export default class ChooseFileModal extends Component<Signature> {
   }
 
   @action
-  private pick(path: LocalPath | undefined) {
+  private async pick(path: LocalPath | undefined) {
     if (this.deferred && this.selectedRealm && path) {
       let fileURL = new RealmPaths(this.selectedRealm.url).fileURL(path);
-      let file = this.matrixService.fileAPI.createFileDef({
-        sourceUrl: fileURL.toString(),
-        name: fileURL.toString().split('/').pop()!,
-      });
+      let file = await this.store.getFileMeta<FileDef>(fileURL.href);
+      if (isCardErrorJSONAPI(file)) {
+        throw new Error(
+          `choose-file-modal: failed to load file meta for ${fileURL.href}`,
+        );
+      }
       this.deferred.fulfill(file);
     }
 

packages/host/app/services/store.ts

@@ -52,6 +52,7 @@ import {
 
 import type { CardDef, BaseDef } from 'https://cardstack.com/base/card-api';
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
+import type { FileDef } from 'https://cardstack.com/base/file-api';
 
 import type { RealmEventContent } from 'https://cardstack.com/base/matrix-event';
 
@@ -377,6 +378,31 @@ export default class StoreService extends Service implements StoreInterface {
     return await this.getInstance<T>({ idOrDoc: id });
   }
 
+  async getFileMeta<T extends FileDef>(
+    url: string,
+  ): Promise<T | CardErrorJSONAPI> {
+    return await this.withTestWaiters(async () => {
+      try {
+        let fileMetaDoc = await this.store.loadFileMetaDocument(url);
+        if (isCardError(fileMetaDoc)) {
+          throw fileMetaDoc;
+        }
+        let api = await this.cardService.getAPI();
+        let fileInstance = await api.createFromSerialized(
+          fileMetaDoc.data,
+          fileMetaDoc,
+          fileMetaDoc.data.id ? new URL(fileMetaDoc.data.id) : new URL(url),
+          { store: this.store },
+        );
+        this.setIdentityContext(fileInstance as unknown as CardDef);
+        return fileInstance as unknown as T;
+      } catch (error: any) {
+        let errorResponse = processCardError(url, error);
+        return errorResponse.errors[0];
+      }
+    });
+  }
+
   // Bypass cached state and fetch from source of truth
   async getWithoutCache<T extends CardDef>(
     id: string,

packages/host/tests/acceptance/interact-submode-test.gts

@@ -6,6 +6,7 @@ import {
   typeIn,
   triggerKeyEvent,
   settled,
+  waitFor,
 } from '@ember/test-helpers';
 
 import { triggerEvent } from '@ember/test-helpers';
@@ -511,7 +512,7 @@ module('Acceptance | interact submode tests', function (hooks) {
     });
 
     test('clicking a linked file opens it as a new isolated stack item', async function (assert) {
-      let fileId = `${testRealmURL}FileLinkCard/notes.txt`;
+      let fileId = `${testRealmURL}FileLinkCard/notes.md`;
       await visitOperatorMode({
         stacks: [
           [
@@ -549,6 +550,55 @@ module('Acceptance | interact submode tests', function (hooks) {
       });
     });
 
+    test('can link a file via the chooser and index the update', async function (assert) {
+      let cardId = `${testRealmURL}FileLinkCard/empty`;
+      await visitOperatorMode({
+        stacks: [
+          [
+            {
+              id: cardId,
+              format: 'edit',
+            },
+          ],
+        ],
+      });
+
+      let messageService = getService('message-service');
+      let receivedEventDeferred = new Deferred<IncrementalIndexEventContent>();
+      messageService.listenerCallbacks.get(testRealmURL)!.push((ev) => {
+        if (
+          ev.eventName === 'index' &&
+          ev.indexType === 'incremental-index-initiation'
+        ) {
+          return; // ignore the index initiation event
+        }
+        if (ev.eventName === 'index' && ev.indexType === 'incremental') {
+          receivedEventDeferred.fulfill(ev as IncrementalIndexEventContent);
+        }
+      });
+
+      await click(
+        `[data-test-links-to-editor="attachment"] [data-test-add-new="attachment"]`,
+      );
+      await waitFor('[data-test-file="README.md"]');
+      await click('[data-test-file="README.md"]');
+      await click('[data-test-choose-file-modal-add-button]');
+
+      await click('[data-test-edit-button]');
+
+      assert
+        .dom(
+          `[data-test-stack-card="${cardId}"] [data-test-file-link-attachment]`,
+        )
+        .includesText('Hello World', 'linked file is rendered');
+
+      let indexEvent = await receivedEventDeferred.promise;
+      assert.ok(
+        indexEvent.invalidations.includes(cardId),
+        'indexing invalidates the edited card',
+      );
+    });
+
     test('can save mutated card without having opened in stack', async function (assert) {
       await visitOperatorMode({
         stacks: [

packages/host/tests/helpers/interact-submode-setup.gts

@@ -56,12 +56,12 @@ export function setupInteractSubmodeTests(
     let string: typeof import('https://cardstack.com/base/string');
     let spec: typeof import('https://cardstack.com/base/spec');
     let cardsGrid: typeof import('https://cardstack.com/base/cards-grid');
-    let fileApi: typeof import('https://cardstack.com/base/file-api');
+    let markdownFileDef: typeof import('https://cardstack.com/base/markdown-file-def');
     cardApi = await loader.import(`${baseRealm.url}card-api`);
     string = await loader.import(`${baseRealm.url}string`);
     spec = await loader.import(`${baseRealm.url}spec`);
     cardsGrid = await loader.import(`${baseRealm.url}cards-grid`);
-    fileApi = await loader.import(`${baseRealm.url}file-api`);
+    markdownFileDef = await loader.import(`${baseRealm.url}markdown-file-def`);
 
     let {
       field,
@@ -76,7 +76,7 @@ export function setupInteractSubmodeTests(
     let { default: StringField } = string;
     let { Spec } = spec;
     let { CardsGrid } = cardsGrid;
-    let { FileDef } = fileApi;
+    let { MarkdownDef } = markdownFileDef;
 
     class Pet extends CardDef {
       static displayName = 'Pet';
@@ -245,7 +245,7 @@ export function setupInteractSubmodeTests(
     class FileLinkCard extends CardDef {
       static displayName = 'File Link Card';
       @field title = contains(StringField);
-      @field attachment = linksTo(FileDef);
+      @field attachment = linksTo(MarkdownDef);
 
       static isolated = class Isolated extends Component<typeof this> {
         <template>
@@ -313,8 +313,8 @@ export function setupInteractSubmodeTests(
         'personnel.gts': { Personnel },
         'pet.gts': { Pet, Puppy },
         'shipping-info.gts': { ShippingInfo },
-        'README.txt': `Hello World`,
-        'FileLinkCard/notes.txt': 'Hello from a file link',
+        'README.md': `# Hello World`,
+        'FileLinkCard/notes.md': '# Hello from a file link',
         'person-entry.json': new Spec({
           cardTitle: 'Person Card',
           cardDescription: 'Spec for Person Card',
@@ -392,11 +392,11 @@ export function setupInteractSubmodeTests(
             relationships: {
               attachment: {
                 links: {
-                  self: './notes.txt',
+                  self: './notes.md',
                 },
                 data: {
                   type: 'file-meta',
-                  id: './notes.txt',
+                  id: './notes.md',
                 },
               },
             },
@@ -408,6 +408,28 @@ export function setupInteractSubmodeTests(
             },
           },
         },
+        'FileLinkCard/empty.json': {
+          data: {
+            type: 'card',
+            attributes: {
+              title: 'Empty linked file',
+            },
+            relationships: {
+              attachment: {
+                links: {
+                  self: null,
+                },
+                data: null,
+              },
+            },
+            meta: {
+              adoptsFrom: {
+                module: '../file-link-card',
+                name: 'FileLinkCard',
+              },
+            },
+          },
+        },
         'Puppy/marco.json': new Puppy({ name: 'Marco', age: '5 months' }),
         'grid.json': new CardsGrid(),
         'index.json': new CardsGrid(),

packages/host/tests/integration/realm-test.gts

@@ -2958,6 +2958,48 @@ module('Integration | realm', function (hooks) {
     assert.strictEqual(response.status, 404, 'file no longer exists');
   });
 
+  test('realm can delete a file asset via card source', async function (assert) {
+    let { realm } = await setupIntegrationTestRealm({
+      mockMatrixUtils,
+      contents: {
+        'notes.md': '# Notes\n\nhello\n',
+      },
+    });
+
+    let response = await handle(
+      realm,
+      new Request(`${testRealmURL}notes.md`, {
+        headers: {
+          Accept: 'application/vnd.card+source',
+        },
+      }),
+    );
+    assert.strictEqual(response.status, 200, 'file exists');
+
+    response = await handle(
+      realm,
+      new Request(`${testRealmURL}notes.md`, {
+        method: 'DELETE',
+        headers: {
+          Accept: 'application/vnd.card+source',
+        },
+      }),
+    );
+    await realm.flushUpdateEvents();
+
+    assert.strictEqual(response.status, 204, 'file is deleted');
+
+    response = await handle(
+      realm,
+      new Request(`${testRealmURL}notes.md`, {
+        headers: {
+          Accept: 'application/vnd.card+source',
+        },
+      }),
+    );
+    assert.strictEqual(response.status, 404, 'file no longer exists');
+  });
+
   test('realm can serve compiled js file when requested without file extension ', async function (assert) {
     let { realm } = await setupIntegrationTestRealm({
       mockMatrixUtils,