From 06a6ad73ab298e20a19e2af8016662ee9e2dde5f Mon Sep 17 00:00:00 2001
From: Florian Ehrenstorfer <flo.ehrenstorfer@tum.de>
Date: Mon, 16 Sep 2024 16:00:16 +0200
Subject: [PATCH] #82: update PR widget with labels and reviews

---
 .../pull-request-widget.component.html         | 18 +++++++++++++-----
 .../pull-request-widget.stories.ts             | 18 ++++++++++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
index 001330ce..a7a46ac2 100644
--- a/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.component.html
@@ -1,13 +1,21 @@
-<div class="border border-gray-300 rounded-lg p-4 bg-white w-72">
-  <!-- Header -->
+<div class="border border-gray-300 rounded-lg p-4 w-72">
   <div class="flex justify-between items-center mb-2 text-xs text-gray-500">
-    <span class="font-bold">{{ pullRequest().repository.name }} #{{ pullRequest().id }} on {{ pullRequest().createdAt }}</span>
+    <span class="font-bold">{{ pullRequest().repository.name }} #{{ pullRequest().number }} on {{ pullRequest().createdAt }}</span>
     <span class="flex items-center space-x-2">
       <span class="text-green-600 font-bold">+{{ pullRequest().additions }}</span>
       <span class="text-red-600 font-bold">-{{ pullRequest().deletions }}</span>
     </span>
   </div>
 
-  <!-- Title -->
-  <div class="font-bold text-sm mb-3">{{ pullRequest().title }}</div>
+  <div class="flex justify-between font-bold text-sm mb-3">
+    {{ pullRequest().title }}
+    @if (pullRequest().reviews) {
+      <span class="text-xs text-gray-500">({{ pullRequest().reviews.size }} reviews)</span>
+    }
+  </div>
+  <div class="flex gap-1 flex-wrap">
+    @for (label of pullRequest().pullRequestLabels; track label.name) {
+      <span class="px-2 py-1 rounded-full text-xs text-white mr-2" [style.background-color]="label.color">{{ label.name }}</span>
+    }
+  </div>
 </div>
diff --git a/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts b/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts
index 2f2583f5..a14e21b3 100644
--- a/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts
+++ b/webapp/src/app/ui/pull-request-widget/pull-request-widget.stories.ts
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 import { PullRequestWidgetComponent } from './pull-request-widget.component';
-import { PullRequest, Repository } from '@app/core/modules/openapi';
+import { PullRequest, PullRequestReview, Repository } from '@app/core/modules/openapi';
 
 const meta: Meta<PullRequestWidgetComponent> = {
   title: 'Components/PullRequestCard',
@@ -20,15 +20,29 @@ const repo: Repository = {
   url: 'http://example.com'
 };
 
+const reviews = new Set<PullRequestReview>([
+  {
+    state: 'APPROVED'
+  },
+  {
+    state: 'CHANGES_REQUESTED'
+  }
+]);
+
 const pullRequest: PullRequest = {
   title: 'Add feature X',
+  number: 12,
   additions: 10,
   deletions: 5,
   url: 'http://example.com',
   state: 'OPEN',
   repository: repo,
   createdAt: 'Jan 1',
-  id: 12
+  pullRequestLabels: new Set([
+    { name: 'bug', color: 'red' },
+    { name: 'enhancement', color: 'green' }
+  ]),
+  reviews: reviews
 };
 
 export const Default: Story = {