linked to pr card testing

Author: lucaslyl

packages/catalog-realm/SubmissionCardPortal/b535d5fb-8eef-44a6-8114-4bce6929b95a.json

@@ -10,12 +10,12 @@
     "attributes": {
       "title": "Submission Card Portal",
       "cardInfo": {
-        "name": null,
+        "name": "Submission Card Portal",
         "notes": null,
         "summary": null,
         "cardThumbnailURL": null
       },
-      "description": null
+      "description": ""
     },
     "relationships": {
       "cardInfo.theme": {

packages/catalog-realm/commands/create-submission.ts

@@ -28,6 +28,7 @@ import SaveCardCommand from '@cardstack/boxel-host/commands/save-card';
 import SerializeCardCommand from '@cardstack/boxel-host/commands/serialize-card';
 
 import type { Listing } from '../catalog-app/listing/listing';
+import CreatePrCardCommand from './create-pr-card';
 import {
   FileContentField,
   SubmissionCard,
@@ -61,8 +62,10 @@ export default class CreateSubmissionCommand extends Command<
   protected async run(input: CreateSubmissionInput): Promise<CardDef> {
     let { listingId, realm, roomId } = input;
     let realmUrl = new RealmPaths(new URL(realm)).url;
+    let submissionsRealmUrl = new URL('/submissions/', realmUrl).href;
     let getCardCommand = new GetCardCommand(this.commandContext);
     let saveCardCommand = new SaveCardCommand(this.commandContext);
+    let createPrCardCommand = new CreatePrCardCommand(this.commandContext);
 
     if (!listingId) {
       throw new Error('Missing listingId for CreateSubmission');
@@ -113,11 +116,17 @@ export default class CreateSubmissionCommand extends Command<
       throw new Error('Missing listing.name for CreateSubmission');
     }
     let branchName = toBranchName(roomId, listing.name);
+    let prCard = await createPrCardCommand.execute({
+      realm: submissionsRealmUrl,
+      branchName,
+      prTitle: listing.name,
+    });
 
     let submission = new SubmissionCard({
       listing,
       roomId,
       branchName,
+      prCard,
       allFileContents: filesWithContent.map(
         (file) =>
           new FileContentField({

packages/catalog-realm/commands/process-github-event.gts

@@ -32,26 +32,11 @@ export default class ProcessGithubEventCommand extends Command<
       payload,
     });
 
-    // When a PR is opened, create the PR card first
-    if (eventType === 'pull_request' && payload?.action === 'opened') {
-      let pr = payload.pull_request;
-      if (pr) {
-        await new CreatePrCardCommand(this.commandContext).execute({
-          realm,
-          prNumber: pr.number,
-          prUrl: pr.html_url,
-          prTitle: pr.title,
-          branchName: pr.head?.ref,
-          submittedBy: pr.user?.login,
-        });
-      }
-    }
-
-    await new SaveCardCommand(this.commandContext).execute({
+    let savedCard = await new SaveCardCommand(this.commandContext).execute({
       card,
       realm,
     });
 
-    return card;
+    return savedCard;
   }
 }

packages/catalog-realm/pr-card/components/isolated/mergeable-section.gts

@@ -0,0 +1,105 @@
+import GlimmerComponent from '@glimmer/component';
+import TriangleAlertIcon from '@cardstack/boxel-icons/triangle-alert';
+import CircleCheckIcon from '@cardstack/boxel-icons/circle-check';
+
+interface MergeableSectionSignature {
+  Args: {
+    isMergeable: boolean;
+    isClosedOrMerged: boolean;
+    blockReasons: string[];
+  };
+}
+
+export class MergeableSection extends GlimmerComponent<MergeableSectionSignature> {
+  <template>
+    {{#unless @isClosedOrMerged}}
+      {{#if @isMergeable}}
+        <div class='mergeable-banner mergeable-banner--ok'>
+          <span class='mergeable-icon-wrap mergeable-icon-wrap--ok'>
+            <CircleCheckIcon class='mergeable-icon' />
+          </span>
+          <div class='mergeable-content'>
+            <span class='mergeable-title'>This branch has no conflicts</span>
+            <span class='mergeable-subtitle'>Merging can be performed
+              automatically</span>
+          </div>
+        </div>
+      {{else}}
+        <div class='mergeable-banner mergeable-banner--blocked'>
+          <span class='mergeable-icon-wrap mergeable-icon-wrap--blocked'>
+            <TriangleAlertIcon class='mergeable-icon' />
+          </span>
+          <div class='mergeable-content'>
+            <span class='mergeable-title'>Merging is blocked</span>
+            {{#each @blockReasons as |reason|}}
+              <span class='mergeable-reason'>{{reason}}</span>
+            {{/each}}
+          </div>
+        </div>
+      {{/if}}
+    {{/unless}}
+
+    <style scoped>
+      .mergeable-banner {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--boxel-sp-sm);
+        padding: var(--boxel-sp-sm) var(--boxel-sp-lg);
+        border-top: 1px solid var(--border, var(--boxel-border-color));
+        border-bottom: 1px solid var(--border, var(--boxel-border-color));
+      }
+      .mergeable-banner--blocked {
+        background: color-mix(
+          in srgb,
+          var(--destructive, #d73a49) 5%,
+          var(--card, #ffffff)
+        );
+      }
+      .mergeable-banner--ok {
+        background: color-mix(
+          in srgb,
+          var(--chart-1, #28a745) 5%,
+          var(--card, #ffffff)
+        );
+      }
+      .mergeable-icon-wrap {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+      .mergeable-icon-wrap--blocked {
+        background: var(--destructive, #d73a49);
+      }
+      .mergeable-icon-wrap--ok {
+        background: var(--chart-1, #28a745);
+      }
+      .mergeable-icon {
+        width: 16px;
+        height: 16px;
+        color: #ffffff;
+      }
+      .mergeable-content {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
+      .mergeable-title {
+        font-size: var(--boxel-font-sm);
+        font-weight: 700;
+        color: var(--foreground, #1f2328);
+        line-height: 1.4;
+      }
+      .mergeable-reason,
+      .mergeable-subtitle {
+        font-size: var(--boxel-font-sm);
+        color: var(--muted-foreground, #656d76);
+        line-height: 1.5;
+      }
+    </style>
+  </template>
+}

packages/catalog-realm/pr-card/pr-card.gts

@@ -19,6 +19,7 @@ import { HeaderSection } from './components/isolated/header-section';
 import { CiSection } from './components/isolated/ci-section';
 import { ReviewSection } from './components/isolated/review-section';
 import { SummarySection } from './components/isolated/summary-section';
+import { MergeableSection } from './components/isolated/mergeable-section';
 
 import {
   renderPrActionLabel,
@@ -196,6 +197,44 @@ class IsolatedTemplate extends Component<typeof PrCard> {
     return !!this.latestPrReviewCommentEventInstance;
   }
 
+  // ── Mergeability ──
+  get isClosed() {
+    let label = this.latestPrActionLabel;
+    return label === 'Closed' || label === 'Merged';
+  }
+
+  get isDraft() {
+    return this.latestPrActionLabel === 'Draft';
+  }
+
+  get mergeBlockReasons(): string[] {
+    if (this.isClosed) return [];
+    let reasons: string[] = [];
+    if (this.isDraft) {
+      reasons.push('This pull request is still a work in progress');
+    }
+    let { ciItems } = this;
+    if (ciItems.some((i) => i.state === 'failure')) {
+      reasons.push('Some checks were not successful');
+    } else if (ciItems.some((i) => i.state === 'in_progress')) {
+      reasons.push('Some checks are still in progress');
+    }
+    let reviewState = this.latestReviewState;
+    if (reviewState === 'changes_requested') {
+      reasons.push('Changes were requested by a reviewer');
+    } else if (reviewState !== 'approved') {
+      reasons.push(
+        'At least 1 approving review is required by reviewers with write access',
+      );
+    }
+    return reasons;
+  }
+
+  get isMergeable() {
+    if (this.isClosed) return false;
+    return this.mergeBlockReasons.length === 0;
+  }
+
   <template>
     <article class='pr-card'>
       <HeaderSection
@@ -229,6 +268,12 @@ class IsolatedTemplate extends Component<typeof PrCard> {
           />
         </section>
 
+        <MergeableSection
+          @isMergeable={{this.isMergeable}}
+          @isClosedOrMerged={{this.isClosed}}
+          @blockReasons={{this.mergeBlockReasons}}
+        />
+
         <SummarySection @summary={{this.prBodySummary}} />
       </div>
     </article>
@@ -446,6 +491,21 @@ class FittedTemplate extends Component<typeof PrCard> {
     return computeLatestReviewState(this.latestReviewByReviewer);
   }
 
+  // ── Mergeability ──
+  get isClosed() {
+    let label = this.latestPrActionLabel;
+    return label === 'Closed' || label === 'Merged';
+  }
+
+  get isMergeBlocked() {
+    if (this.isClosed) return false;
+    if (this.latestPrActionLabel === 'Draft') return true;
+    if (this.ciItems.some((i) => i.state === 'failure')) return true;
+    if (this.ciItems.some((i) => i.state === 'in_progress')) return true;
+    if (this.latestReviewState !== 'approved') return true;
+    return false;
+  }
+
   copyBranchName = async () => {
     let branchName = this.prBranchName?.trim();
     if (!branchName) {
@@ -527,14 +587,29 @@ class FittedTemplate extends Component<typeof PrCard> {
       {{#if (eq this.latestReviewState 'changes_requested')}}
         <div class='review-status-row review-status-row--changes'>
           <span class='review-status-label'>Changes Requested</span>
+          {{#if this.isMergeBlocked}}
+            <Pill class='merge-blocked-pill' @pillBackgroundColor='#d73a49'>
+              <:default><span class='merge-blocked-label'>Merge blocked</span></:default>
+            </Pill>
+          {{/if}}
         </div>
       {{else if (eq this.latestReviewState 'approved')}}
         <div class='review-status-row review-status-row--approved'>
           <span class='review-status-label'>Approved</span>
+          {{#if this.isMergeBlocked}}
+            <Pill class='merge-blocked-pill' @pillBackgroundColor='#d73a49'>
+              <:default><span class='merge-blocked-label'>Merge blocked</span></:default>
+            </Pill>
+          {{/if}}
         </div>
       {{else}}
         <div class='review-status-row review-status-row--pending'>
           <span class='review-status-label'>Pending Review</span>
+          {{#if this.isMergeBlocked}}
+            <Pill class='merge-blocked-pill' @pillBackgroundColor='#d73a49'>
+              <:default><span class='merge-blocked-label'>Merge blocked</span></:default>
+            </Pill>
+          {{/if}}
         </div>
       {{/if}}
 
@@ -729,6 +804,7 @@ class FittedTemplate extends Component<typeof PrCard> {
       .review-status-row {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
         border-bottom: 1px solid var(--border, var(--boxel-border-color));
       }
@@ -762,6 +838,15 @@ class FittedTemplate extends Component<typeof PrCard> {
       .review-status-row--approved .review-status-label {
         color: var(--chart-1, #28a745);
       }
+      /* ── Merge blocked pill ── */
+      .merge-blocked-pill {
+        --boxel-pill-border-radius: 2em;
+      }
+      .merge-blocked-label {
+        font-size: 10px;
+        font-weight: 600;
+        color: #fff;
+      }
       /* ── Summary ── */
       .summary-section {
         display: flex;

packages/catalog-realm/submission-card/components/card/fitted-template.gts

@@ -1,16 +1,13 @@
 import { on } from '@ember/modifier';
 
-import { Component, realmURL } from 'https://cardstack.com/base/card-api';
-import type { Query } from '@cardstack/runtime-common';
+import { Component } from 'https://cardstack.com/base/card-api';
 
 import { BoxelButton } from '@cardstack/boxel-ui/components';
 
 import GitBranchIcon from '@cardstack/boxel-icons/git-branch';
 import GitPullRequestIcon from '@cardstack/boxel-icons/git-pull-request';
 import MessageIcon from '@cardstack/boxel-icons/message';
 
-import { buildRealmHrefs } from '../../../pr-card/utils';
-import type { PrCard } from '../../../pr-card/pr-card';
 import type { SubmissionCard } from '../../submission-card';
 
 export class FittedTemplate extends Component<typeof SubmissionCard> {
@@ -30,33 +27,8 @@ export class FittedTemplate extends Component<typeof SubmissionCard> {
     }
   };
 
-  get realmHrefs() {
-    return buildRealmHrefs(this.args.model[realmURL]?.href);
-  }
-
-  get prCardQuery(): Query | undefined {
-    if (!this.args.model.branchName) return undefined;
-    return {
-      filter: {
-        on: {
-          module: new URL('../../../pr-card/pr-card', import.meta.url).href,
-          name: 'PrCard',
-        },
-        eq: { branchName: this.args.model.branchName },
-      },
-      sort: [{ by: 'lastModified', direction: 'desc' }],
-    };
-  }
-
-  prCardData = this.args.context?.getCards(
-    this,
-    () => this.prCardQuery,
-    () => this.realmHrefs,
-    { isLive: true },
-  );
-
-  get prCardInstance(): PrCard | null {
-    return (this.prCardData?.instances?.[0] as PrCard) ?? null;
+  get prCardInstance() {
+    return this.args.model.prCard ?? null;
   }
 
   openPrCard = (e: Event) => {