Support preselected examples in create listing modal (#4283)

* Support preselected examples in create listing modal

* Fix removeSelectedExample to normalize URLs before filtering

* fix lint

* Replace test-only selector in runtime CSS

* fix test

* fix codex feedback & fix lint

* update example field ui

* fix host test

Author: lucaslyl

packages/host/app/commands/open-create-listing-modal.ts

@@ -1,5 +1,8 @@
 import { service } from '@ember/service';
 
+import { isFieldDef } from '@cardstack/runtime-common';
+import { loadCardDef } from '@cardstack/runtime-common/code-ref';
+
 import type * as BaseCommandModule from 'https://cardstack.com/base/command';
 
 import HostBaseCommand from '../lib/host-base-command';
@@ -24,10 +27,23 @@ export default class OpenCreateListingModalCommand extends HostBaseCommand<
   protected async run(
     input: BaseCommandModule.ListingCreateInput,
   ): Promise<undefined> {
+    let declarationKind: 'card' | 'field' = 'card';
+    if (input.codeRef) {
+      try {
+        let cardOrField = await loadCardDef(input.codeRef, {
+          loader: this.loaderService.loader,
+        });
+        declarationKind = isFieldDef(cardOrField) ? 'field' : 'card';
+      } catch {
+        declarationKind = 'card';
+      }
+    }
+
     this.operatorModeStateService.showCreateListingModal({
       codeRef: input.codeRef,
       targetRealm: input.targetRealm,
       openCardIds: input.openCardIds,
+      declarationKind,
     });
   }
 }

packages/host/app/components/card-catalog/modal.gts

@@ -76,6 +76,7 @@ type State = {
   availableRealmUrls: string[];
   hasPreselectedCard?: boolean;
   consumingRealm?: URL;
+  preselectConsumingRealm?: boolean;
 };
 
 function isNewCardArgs(item: string | NewCardArgs): item is NewCardArgs {
@@ -111,6 +112,8 @@ export default class CardCatalogModal extends Component<Signature> {
             @searchKey={{state.searchKey}}
             @baseFilter={{state.baseFilter}}
             @availableRealmUrls={{state.availableRealmUrls}}
+            @consumingRealm={{state.consumingRealm}}
+            @preselectConsumingRealm={{state.preselectConsumingRealm}}
             as |Bar Content|
           >
             <ModalContainer
@@ -259,6 +262,8 @@ export default class CardCatalogModal extends Component<Signature> {
       createNewCard?: CreateNewCard;
       preselectedCardTypeQuery?: Query;
       consumingRealm?: URL;
+      preselectConsumingRealm?: boolean;
+      preselectedCardUrls?: string[];
     },
   ): Promise<undefined | string | string[]> {
     let result = await this._chooseCard.perform(
@@ -297,6 +302,8 @@ export default class CardCatalogModal extends Component<Signature> {
         multiSelect?: boolean;
         preselectedCardTypeQuery?: Query;
         consumingRealm?: URL;
+        preselectConsumingRealm?: boolean;
+        preselectedCardUrls?: string[];
       } = {},
     ) => {
       await this.realmServer.ready;
@@ -342,6 +349,14 @@ export default class CardCatalogModal extends Component<Signature> {
           preselectedCardUrl = `${instances[0].id}.json`;
         }
       }
+      let preselectedCardUrls = (
+        opts?.preselectedCardUrls?.length
+          ? opts.preselectedCardUrls
+          : preselectedCardUrl
+            ? [preselectedCardUrl]
+            : []
+      ).map((url) => (url.endsWith('.json') ? url : `${url}.json`));
+
       let cardCatalogState = new TrackedObject<State>({
         id: this.stateId,
         request,
@@ -350,10 +365,11 @@ export default class CardCatalogModal extends Component<Signature> {
         dismissModal: false,
         baseFilter: query.filter,
         availableRealmUrls: this.realmServer.availableRealmURLs,
-        selectedCards: preselectedCardUrl ? [preselectedCardUrl] : [],
+        selectedCards: preselectedCardUrls,
         multiSelect: opts?.multiSelect ?? false,
-        hasPreselectedCard: Boolean(preselectedCardUrl),
+        hasPreselectedCard: preselectedCardUrls.length > 0,
         consumingRealm: opts.consumingRealm,
+        preselectConsumingRealm: opts.preselectConsumingRealm,
       });
       this.stateStack.push(cardCatalogState);
       return await request.deferred.promise;

packages/host/app/components/card-search/panel.gts

@@ -26,6 +26,7 @@ import {
 } from '@cardstack/runtime-common/helpers/card-type-display-name';
 
 import { getPrerenderedSearch } from '@cardstack/host/resources/prerendered-search';
+import type RealmService from '@cardstack/host/services/realm';
 import type RealmServerService from '@cardstack/host/services/realm-server';
 import type RecentCards from '@cardstack/host/services/recent-cards-service';
 
@@ -51,6 +52,8 @@ interface Signature {
     searchKey: string;
     baseFilter?: Filter;
     availableRealmUrls?: string[];
+    consumingRealm?: URL;
+    preselectConsumingRealm?: boolean;
   };
   Blocks: {
     default: [
@@ -72,13 +75,15 @@ interface Signature {
         | 'activeSort'
         | 'onSortChange'
         | 'filteredRecentCards'
+        | 'initialFocusedSection'
       >,
       string,
     ];
   };
 }
 
 export default class SearchPanel extends Component<Signature> {
+  @service declare private realm: RealmService;
   @service declare private realmServer: RealmServerService;
   @service declare private recentCardsService: RecentCards;
   @consume(CardContextName) declare private cardContext:
@@ -87,7 +92,32 @@ export default class SearchPanel extends Component<Signature> {
   @consume(GetCardCollectionContextName)
   declare private getCardCollection: getCardCollection;
 
-  @tracked private selectedRealms: PickerOption[] = [];
+  @tracked private selectedRealms: PickerOption[] = this.initialSelectedRealms;
+
+  private get shouldPreselectConsumingRealm(): boolean {
+    return Boolean(this.args.preselectConsumingRealm);
+  }
+
+  private get initialSelectedRealms(): PickerOption[] {
+    let consumingRealm = this.args.consumingRealm;
+    if (!this.shouldPreselectConsumingRealm || !consumingRealm) {
+      return [];
+    }
+    let realmURL = consumingRealm.href;
+    let info = this.realm.info(realmURL);
+    let label = info?.name ?? realmURL;
+    let icon = info?.iconURL ?? undefined;
+    return [{ id: realmURL, icon, label, type: 'option' }];
+  }
+
+  private get initialFocusedSectionId(): string | null {
+    let consumingRealm = this.args.consumingRealm;
+    if (!this.shouldPreselectConsumingRealm || !consumingRealm) {
+      return null;
+    }
+    return `realm:${consumingRealm.href}`;
+  }
+
   @tracked private activeSort: SortOption = SORT_OPTIONS[0];
 
   @cached
@@ -293,6 +323,7 @@ export default class SearchPanel extends Component<Signature> {
         activeSort=this.activeSort
         onSortChange=this.onSortChange
         filteredRecentCards=this.baseFilteredRecentCards
+        initialFocusedSection=this.initialFocusedSectionId
       )
       this.joinedSelectedRealmURLs
     }}

packages/host/app/components/card-search/search-content.gts

@@ -156,6 +156,7 @@ interface Signature {
     searchResource: PrerenderedSearchResource;
     activeSort: SortOption;
     onSortChange: (sort: SortOption) => void;
+    initialFocusedSection?: string | null;
   };
   Blocks: {};
 }
@@ -168,7 +169,8 @@ export default class SearchContent extends Component<Signature> {
 
   @tracked activeViewId = 'grid';
   /** Section id when focused: 'realm:<url>' or 'recents'. Null = no focus */
-  @tracked focusedSection: string | null = null;
+  @tracked focusedSection: string | null =
+    this.args.initialFocusedSection ?? null;
   @tracked displayedCountBySection: Record<string, number> = {};
 
   @consume(GetCardContextName) declare private getCard: getCard;