Get file extension and realm info

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

@@ -48,7 +48,10 @@ import config from '@cardstack/host/config/environment';
 
 import monacoModifier from '@cardstack/host/modifiers/monaco';
 
-import { adoptionChainResource } from '@cardstack/host/resources/adoption-chain';
+import {
+  getCardType,
+  type CardType,
+} from '@cardstack/host/resources/card-type';
 import {
   file,
   isReady,
@@ -78,6 +81,8 @@ import RecentFilesService from '@cardstack/host/services/recent-files-service';
 
 import { CardDef } from 'https://cardstack.com/base/card-api';
 
+import { type BaseDef } from 'https://cardstack.com/base/card-api';
+
 import FileTree from '../editor/file-tree';
 
 import BinaryFileInfo from './binary-file-info';
@@ -111,6 +116,16 @@ const defaultPanelWidths: PanelWidths = {
   emptyCodeModePanel: '80%',
 };
 
+interface ExportedCard {
+  cardType: CardType;
+  card: typeof BaseDef;
+}
+
+// Element
+// - exported / unexported card or field
+// - exported class or function
+export type ElementInFile = ExportedCard; // can add more types here
+
 export default class CodeMode extends Component<Signature> {
   @service declare monacoService: MonacoService;
   @service declare cardService: CardService;
@@ -122,6 +137,7 @@ export default class CodeMode extends Component<Signature> {
   @tracked private loadFileError: string | null = null;
   @tracked private maybeMonacoSDK: MonacoSDK | undefined;
   @tracked private card: CardDef | undefined;
+  @tracked private selectedElement: ElementInFile | undefined;
   @tracked cardError: Error | undefined;
   private hasUnsavedSourceChanges = false;
   private hasUnsavedCardChanges = false;
@@ -298,6 +314,56 @@ export default class CodeMode extends Component<Signature> {
     return state;
   });
 
+  @use private elements = resource(() => {
+    if (!this.importedModule) {
+      return new TrackedObject({
+        error: null,
+        isLoading: false,
+        value: [],
+        load: () => Promise<void>,
+      });
+    }
+
+    const state: {
+      isLoading: boolean;
+      value: ElementInFile[] | null;
+      error: Error | undefined;
+      load: () => Promise<void>;
+    } = new TrackedObject({
+      isLoading: true,
+      value: [],
+      error: undefined,
+      load: async () => {
+        state.isLoading = true;
+        if (this.importedModule === undefined) {
+          state.value = [];
+          return;
+        }
+        try {
+          await this.importedModule.loaded;
+          let module = this.importedModule?.module;
+          if (module) {
+            let cards = cardsOrFieldsFromModule(module);
+            let elements: ElementInFile[] = cards.map((card) => {
+              return {
+                cardType: getCardType(this, () => card),
+                card: card,
+              };
+            });
+            state.value = elements;
+          }
+        } catch (error: any) {
+          state.error = error;
+        } finally {
+          state.isLoading = false;
+        }
+      },
+    });
+
+    state.load();
+    return state;
+  });
+
   private openFile = maybe(this, (context) => {
     if (!this.codePath) {
       this.setFileView('browser');
@@ -353,15 +419,6 @@ export default class CodeMode extends Component<Signature> {
       }
     }
   });
-
-  @use private adoptionChain = resource(() => {
-    if (this.importedModule) {
-      return adoptionChainResource(this, this.importedModule);
-    } else {
-      return undefined;
-    }
-  });
-
   // We are actually loading cards using a side-effect of this cached getter
   // instead of a resource because with a resource it becomes impossible
   // to ignore our own auto-save echoes, since the act of auto-saving triggers
@@ -420,6 +477,31 @@ export default class CodeMode extends Component<Signature> {
     return this.card;
   }
 
+  private get selectedElementInFile() {
+    if (this.selectedElement) {
+      return this.selectedElement;
+    } else {
+      if (this.elementsInFile === null) {
+        return;
+      }
+      return this.elementsInFile.length > 0
+        ? this.elementsInFile[0]
+        : undefined;
+    }
+  }
+
+  @action
+  private selectElementInFile(el: ElementInFile) {
+    this.selectedElement = el;
+  }
+
+  get elementsInFile() {
+    if (this.elements.value === null) {
+      return [];
+    }
+    return this.elements.value;
+  }
+
   private loadIfDifferent = restartableTask(
     async (url: URL, incomingDoc?: SingleCardDocument) => {
       await this.withTestWaiters(async () => {
@@ -691,8 +773,9 @@ export default class CodeMode extends Component<Signature> {
                         @cardInstance={{this.card}}
                         @readyFile={{this.readyFile}}
                         @realmInfo={{this.realmInfo}}
-                        @realmIconURL={{this.realmIconURL}}
-                        @adoptionChain={{this.adoptionChain}}
+                        @selectedElement={{this.selectedElementInFile}}
+                        @elements={{this.elementsInFile}}
+                        @selectElement={{this.selectElementInFile}}
                         @delete={{this.delete}}
                         data-test-card-inheritance-panel
                       />
@@ -1025,3 +1108,14 @@ function comparableSerialization(doc: LooseSingleCardDocument) {
   }
   return doc;
 }
+
+function isCardOrField(cardOrField: any): cardOrField is typeof BaseDef {
+  return typeof cardOrField === 'function' && 'baseDef' in cardOrField;
+}
+
+function cardsOrFieldsFromModule(
+  module: Record<string, any>,
+  _never?: never, // glint insists that w/o this last param that there are actually no params
+): (typeof BaseDef)[] {
+  return Object.values(module).filter(isCardOrField);
+}

packages/host/app/components/operator-mode/definition-container/base.gts

@@ -16,9 +16,8 @@ interface Action {
 export interface BaseArgs {
   title: string | undefined;
   name: string | undefined;
-  fileExtension: string;
-  realmInfo: RealmInfo | null;
-  realmIconURL: string | null | undefined;
+  fileExtension: string | undefined;
+  realmInfo: RealmInfo | undefined | null;
   isActive: boolean;
 }
 
@@ -35,6 +34,10 @@ export class BaseDefinitionContainer extends Component<BaseSignature> {
     return this.args.realmInfo?.name;
   }
 
+  get realmIcon(): string | undefined | null {
+    return this.args.realmInfo?.iconURL;
+  }
+
   <template>
     <div class='container {{if @isActive "active"}}' ...attributes>
       <div class='banner'>
@@ -47,11 +50,13 @@ export class BaseDefinitionContainer extends Component<BaseSignature> {
       </div>
       <div class='content'>
         <div class='definition-info'>
-          <div class='realm-info'>
-            <img src={{@realmIconURL}} alt='realm-icon' />
-            <Label class='realm-name' data-test-definition-realm-name>in
-              {{this.realmName}}</Label>
-          </div>
+          {{#if @realmInfo}}
+            <div class='realm-info'>
+              <img src={{this.realmIcon}} alt='realm-icon' />
+              <Label class='realm-name' data-test-definition-realm-name>in
+                {{this.realmName}}</Label>
+            </div>
+          {{/if}}
           <div data-test-definition-name class='definition-name'>{{@name}}</div>
         </div>
         {{#if @isActive}}
@@ -60,7 +65,6 @@ export class BaseDefinitionContainer extends Component<BaseSignature> {
       </div>
 
     </div>
-
     <style>
       .container {
         background-color: var(--boxel-light);

packages/host/app/components/operator-mode/definition-container/index.gts

@@ -19,7 +19,6 @@ export class FileDefinitionContainer extends Component<FileSignature> {
       @name={{undefined}}
       @fileExtension={{@fileExtension}}
       @realmInfo={{@realmInfo}}
-      @realmIconURL={{@realmIconURL}}
       @isActive={{true}}
       data-test-file-definition
     >
@@ -43,7 +42,6 @@ export class ModuleDefinitionContainer extends Component<ModuleSignature> {
       @name={{@name}}
       @fileExtension={{@fileExtension}}
       @realmInfo={{@realmInfo}}
-      @realmIconURL={{@realmIconURL}}
       @isActive={{@isActive}}
       data-test-card-module-definition
     >
@@ -70,7 +68,6 @@ export class InstanceDefinitionContainer extends Component<InstanceSignature> {
       @fileExtension={{@fileExtension}}
       @name={{@name}}
       @realmInfo={{@realmInfo}}
-      @realmIconURL={{@realmIconURL}}
       @isActive={{true}}
       data-test-card-instance-definition
     >
@@ -102,7 +99,6 @@ export class ClickableModuleDefinitionContainer extends Component<ClickableModul
         @name={{@name}}
         @fileExtension={{@fileExtension}}
         @realmInfo={{@realmInfo}}
-        @realmIconURL={{@realmIconURL}}
         @isActive={{false}}
         data-test-card-module-definition
       />