Add listing field with CardPill and change action to create PR modal (#4287)

lucaslyl · claude · web-flow · commit 109dc7a7a56a · 2026-04-01T09:12:23.000+08:00
* feat: add listing field with CardPill and change action to create PR modal

Replace static listing name and realm fields with a CardPill component
that links to the listing, and add a "Change" button to select a
different listing via the catalog chooser.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;

* update guard

---------

Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/host/app/components/operator-mode/create-pr-modal.gts b/packages/host/app/components/operator-mode/create-pr-modal.gts
@@ -4,18 +4,18 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { task } from 'ember-concurrency';
+import { restartableTask, task } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
 import onKeyMod from 'ember-keyboard/modifiers/on-key';
 
-import {
-  Button,
-  FieldContainer,
-  RealmIcon,
-} from '@cardstack/boxel-ui/components';
+import { Button, FieldContainer } from '@cardstack/boxel-ui/components';
+
+import { chooseCard } from '@cardstack/runtime-common';
 
 import CreateListingPRRequestCommand from '@cardstack/host/commands/bot-requests/create-listing-pr-request';
+import CardPill from '@cardstack/host/components/card-pill';
 import ModalContainer from '@cardstack/host/components/modal-container';
+import { catalogRealm } from '@cardstack/host/lib/utils';
 
 import type CommandService from '@cardstack/host/services/command-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
@@ -31,6 +31,7 @@ export default class CreatePRModal extends Component<Signature> {
   @service declare private realm: RealmService;
 
   @tracked private isSubmitted = false;
+  @tracked private selectedListingId?: string;
 
   private get payload() {
     return this.operatorModeStateService.createPRModalPayload;
@@ -40,16 +41,19 @@ export default class CreatePRModal extends Component<Signature> {
     return Boolean(this.payload);
   }
 
-  private get realmInfo() {
-    let payload = this.payload;
-    if (!payload) {
+  private get listingId() {
+    return this.selectedListingId ?? this.payload?.listingId;
+  }
+
+  private get listingTitle(): string | undefined {
+    if (this.selectedListingId) {
       return undefined;
     }
-    return this.realm.info(payload.realm);
+    return this.payload?.listingName;
   }
 
-  private get listingName(): string {
-    return this.payload?.listingName ?? 'Listing';
+  private get canChangeListing() {
+    return Boolean(catalogRealm);
   }
 
   private createPR = task(async () => {
@@ -58,18 +62,44 @@ export default class CreatePRModal extends Component<Signature> {
       throw new Error('Cannot create PR without a modal payload');
     }
 
+    let currentListingId = this.listingId;
+    if (!currentListingId) {
+      throw new Error('Cannot create PR without a listing');
+    }
+
+    let realm =
+      this.realm.realmOfURL(new URL(currentListingId))?.href ?? payload.realm;
+
     await new CreateListingPRRequestCommand(
       this.commandService.commandContext,
     ).execute({
-      listingId: payload.listingId,
-      realm: payload.realm,
+      listingId: currentListingId,
+      realm,
     });
 
     this.isSubmitted = true;
   });
 
+  private changeListing = restartableTask(async () => {
+    if (!catalogRealm) {
+      throw new Error('Cannot find catalog realm');
+    }
+    let listingId = await chooseCard({
+      filter: {
+        type: {
+          module: `${catalogRealm.url}catalog-app/listing/listing`,
+          name: 'Listing',
+        },
+      },
+    });
+    if (listingId) {
+      this.selectedListingId = listingId;
+    }
+  });
+
   @action private onClose() {
     this.isSubmitted = false;
+    this.selectedListingId = undefined;
     this.operatorModeStateService.dismissCreatePRModal();
   }
 
@@ -78,7 +108,7 @@ export default class CreatePRModal extends Component<Signature> {
       <ModalContainer
         class='create-pr-modal'
         @cardContainerClass='create-pr'
-        @title={{if this.isSubmitted 'Listing Submitted 🎉 ! ' 'Make a PR'}}
+        @title={{if this.isSubmitted 'Listing Submitted 🎉!' 'Make a PR'}}
         @size='small'
         @isOpen={{this.isModalOpen}}
         @onClose={{this.onClose}}
@@ -87,12 +117,10 @@ export default class CreatePRModal extends Component<Signature> {
         <:content>
           {{#if this.isSubmitted}}
             <div class='submitted-container' data-test-create-pr-success>
-              <p class='submitted-message'>
-                Your listing
-                <strong>{{this.listingName}}</strong>
-                has been submitted for review. A PR will be created on GitHub
-                and you will be notified once it is approved.
-              </p>
+              <div class='submitted-message'>
+                Your listing has been submitted for review. A PR will be created
+                on GitHub and you will be notified once it is approved.
+              </div>
               <Button
                 @as='anchor'
                 @kind='secondary'
@@ -111,15 +139,24 @@ export default class CreatePRModal extends Component<Signature> {
             </p>
             <FieldContainer @label='Listing' class='field'>
               <div class='field-contents' data-test-create-pr-listing-name>
-                <span>{{this.listingName}}</span>
-              </div>
-            </FieldContainer>
-
-            <FieldContainer @label='Realm' @tag='label' class='field'>
-              <div class='field-contents' data-test-create-pr-realm>
-                {{#if this.realmInfo}}
-                  <RealmIcon class='realm-icon' @realmInfo={{this.realmInfo}} />
-                  <span>{{this.realmInfo.name}}</span>
+                {{#if this.listingId}}
+                  <CardPill
+                    @cardId={{this.listingId}}
+                    @urlForRealmLookup={{this.listingId}}
+                    @displayTitle={{this.listingTitle}}
+                    class='listing-pill'
+                  />
+                {{/if}}
+                {{#if this.canChangeListing}}
+                  <Button
+                    @kind='text-only'
+                    @size='small'
+                    @disabled={{this.createPR.isRunning}}
+                    {{on 'click' (perform this.changeListing)}}
+                    data-test-create-pr-change-listing-button
+                  >
+                    Change
+                  </Button>
                 {{/if}}
               </div>
             </FieldContainer>
@@ -139,8 +176,7 @@ export default class CreatePRModal extends Component<Signature> {
               </Button>
             {{else if this.createPR.isRunning}}
               <p class='footer-loading-message' data-test-create-pr-loading>
-                Submitting
-                <strong>{{this.listingName}}</strong>. This may take a moment...
+                Submitting your listing. This may take a moment...
               </p>
               <Button
                 @kind='primary'
@@ -243,10 +279,11 @@ export default class CreatePRModal extends Component<Signature> {
       .field-contents {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         gap: var(--horizontal-gap);
       }
-      .realm-icon {
-        --boxel-realm-icon-size: 1rem;
+      .listing-pill :deep(figure.icon:last-child) {
+        display: none;
       }
       .footer-buttons {
         display: flex;
diff --git a/packages/host/tests/integration/components/create-pr-modal-test.gts b/packages/host/tests/integration/components/create-pr-modal-test.gts
@@ -1,4 +1,4 @@
-import { waitFor } from '@ember/test-helpers';
+import { click, waitFor, waitUntil } from '@ember/test-helpers';
 import GlimmerComponent from '@glimmer/component';
 
 import { module, test } from 'qunit';
@@ -34,7 +34,7 @@ module('Integration | components | create-pr-modal', function (hooks) {
     assert.dom('[data-test-create-pr-modal]').includesText('Make a PR');
   });
 
-  test('shows listing name in modal', async function (assert) {
+  test('shows the listing pill in modal', async function (assert) {
     await renderComponent(
       class TestDriver extends GlimmerComponent {
         <template><OperatorMode @onClose={{noop}} /></template>
@@ -52,7 +52,7 @@ module('Integration | components | create-pr-modal', function (hooks) {
     assert.dom('[data-test-create-pr-listing-name]').includesText('My Listing');
   });
 
-  test('shows realm info in modal', async function (assert) {
+  test('does not show change action when catalog chooser is unavailable', async function (assert) {
     await renderComponent(
       class TestDriver extends GlimmerComponent {
         <template><OperatorMode @onClose={{noop}} /></template>
@@ -67,6 +67,78 @@ module('Integration | components | create-pr-modal', function (hooks) {
 
     await waitFor('[data-test-create-pr-modal]');
 
-    assert.dom('[data-test-create-pr-realm]').exists();
+    assert.dom('[data-test-create-pr-change-listing-button]').doesNotExist();
+  });
+
+  test('does not show a separate realm field in modal', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.showCreatePRModal({
+      realm: testRealmURL,
+      listingId: `${testRealmURL}Listing/1`,
+      listingName: 'My Listing',
+    });
+
+    await waitFor('[data-test-create-pr-modal]');
+
+    assert.dom('[data-test-create-pr-realm]').doesNotExist();
+  });
+
+  test('cancel button dismisses the modal', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.showCreatePRModal({
+      realm: testRealmURL,
+      listingId: `${testRealmURL}Listing/1`,
+      listingName: 'My Listing',
+    });
+
+    await waitFor('[data-test-create-pr-modal]');
+    assert.dom('[data-test-create-pr-modal]').exists();
+
+    await click('[data-test-create-pr-cancel-button]');
+
+    await waitUntil(
+      () => !document.querySelector('[data-test-create-pr-modal]'),
+    );
+    assert.dom('[data-test-create-pr-modal]').doesNotExist();
+    assert.strictEqual(
+      ctx.operatorModeStateService.createPRModalPayload,
+      undefined,
+      'modal payload is cleared after cancel',
+    );
+  });
+
+  test('submit shows success state', async function (assert) {
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template><OperatorMode @onClose={{noop}} /></template>
+      },
+    );
+
+    ctx.operatorModeStateService.showCreatePRModal({
+      realm: testRealmURL,
+      listingId: `${testRealmURL}Listing/1`,
+      listingName: 'My Listing',
+    });
+
+    await waitFor('[data-test-create-pr-modal]');
+
+    await click('[data-test-create-pr-confirm-button]');
+
+    await waitFor('[data-test-create-pr-success]');
+
+    assert
+      .dom('[data-test-create-pr-success]')
+      .includesText('has been submitted for review.');
+    assert.dom('[data-test-create-pr-done-button]').exists();
   });
 });
