From b72de398edc85c9e2fe909382a5426daa51390e2 Mon Sep 17 00:00:00 2001
From: Paul Thiel <pa.thiel@tum.de>
Date: Mon, 23 Dec 2024 02:48:56 +0100
Subject: [PATCH] fix: migrate to v19

---
 client/src/app/app.config.ts                  |  19 +-
 client/src/app/app.routes.ts                  |  35 ++-
 .../branches-table.component.ts               |   3 +-
 .../deployment-state-tag.component.html       |   2 +-
 .../environment-list-view.component.html      |  42 +--
 .../pull-request-table.component.html         |   4 -
 .../branch-list/branch-list.component.html    |   1 +
 .../branch-list/branch-list.component.spec.ts |  23 ++
 .../branch-list/branch-list.component.ts      |  11 +
 .../src/app/pages/ci-cd/ci-cd.component.html  |  19 +-
 client/src/app/pages/ci-cd/ci-cd.component.ts |  42 +--
 .../project-settings.component.html           | 280 ++++++++----------
 .../pull-request-details.component.html       |   2 +-
 .../pull-request-list.component.html          |   1 +
 .../pull-request-list.component.spec.ts       |  23 ++
 .../pull-request-list.component.ts            |  11 +
 16 files changed, 273 insertions(+), 245 deletions(-)
 create mode 100644 client/src/app/pages/branch-list/branch-list.component.html
 create mode 100644 client/src/app/pages/branch-list/branch-list.component.spec.ts
 create mode 100644 client/src/app/pages/branch-list/branch-list.component.ts
 create mode 100644 client/src/app/pages/pull-request-list/pull-request-list.component.html
 create mode 100644 client/src/app/pages/pull-request-list/pull-request-list.component.spec.ts
 create mode 100644 client/src/app/pages/pull-request-list/pull-request-list.component.ts

diff --git a/client/src/app/app.config.ts b/client/src/app/app.config.ts
index bc0cd07c..9a5901b2 100644
--- a/client/src/app/app.config.ts
+++ b/client/src/app/app.config.ts
@@ -3,6 +3,7 @@ import { provideRouter, withComponentInputBinding, withRouterConfig } from '@ang
 import { provideQueryClient, provideTanStackQuery, QueryClient } from '@tanstack/angular-query-experimental';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { providePrimeNG } from 'primeng/config';
+import { definePreset } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
 
 import { routes } from './app.routes';
@@ -31,7 +32,23 @@ export const appConfig: ApplicationConfig = {
     DatePipe,
     providePrimeNG({
       theme: {
-        preset: Aura,
+        preset: definePreset(Aura, {
+          semantic: {
+            primary: {
+              50: '{gray.50}',
+              100: '{gray.100}',
+              200: '{gray.200}',
+              300: '{gray.300}',
+              400: '{gray.400}',
+              500: '{gray.500}',
+              600: '{gray.600}',
+              700: '{gray.700}',
+              800: '{gray.800}',
+              900: '{gray.900}',
+              950: '{gray.950}'
+            }
+          }
+        }),
         options: {
           darkModeSelector: '.dark-selector',
           cssLayer: {
diff --git a/client/src/app/app.routes.ts b/client/src/app/app.routes.ts
index b80d5b2b..867f701b 100644
--- a/client/src/app/app.routes.ts
+++ b/client/src/app/app.routes.ts
@@ -21,18 +21,6 @@ export const routes: Routes = [
     loadComponent: () => import('./pages/main-layout/main-layout.component').then(m => m.MainLayoutComponent),
     children: [
       { path: '', loadComponent: () => import('./pages/ci-cd/ci-cd.component').then(m => m.CiCdComponent) },
-      {
-        path: 'pr',
-        children: [
-          { path: ':pullRequestNumber', loadComponent: () => import('./pages/pull-request-details/pull-request-details.component').then(m => m.PullRequestDetailsComponent) },
-        ]
-      },
-      {
-        path: 'branch',
-        children: [
-          { path: ':branchName', loadComponent: () => import('./pages/branch-details/branch-details.component').then(m => m.BranchDetailsComponent) },
-        ]
-      },
       {
         path: '',
         redirectTo: 'ci-cd',
@@ -53,7 +41,28 @@ export const routes: Routes = [
       },
       {
         path: 'ci-cd',
-        loadComponent: () => import('./pages/ci-cd/ci-cd.component').then(m => m.CiCdComponent)
+        loadComponent: () => import('./pages/ci-cd/ci-cd.component').then(m => m.CiCdComponent),
+        children: [
+          {
+            path: '',
+            redirectTo: 'pr',
+            pathMatch: 'full',
+          },
+          {
+            path: 'pr',
+            children: [
+              { path: '', loadComponent: () => import('./pages/pull-request-list/pull-request-list.component').then(m => m.PullRequestListComponent), },
+              { path: ':pullRequestNumber', loadComponent: () => import('./pages/pull-request-details/pull-request-details.component').then(m => m.PullRequestDetailsComponent) },
+            ]
+          },
+          {
+            path: 'branch',
+            children: [
+              { path: '', loadComponent: () => import('./pages/branch-list/branch-list.component').then(m => m.BranchListComponent),},
+              { path: ':branchName', loadComponent: () => import('./pages/branch-details/branch-details.component').then(m => m.BranchDetailsComponent) },
+            ]
+          },
+        ]
       },
       {
         path: 'settings',
diff --git a/client/src/app/components/branches-table/branches-table.component.ts b/client/src/app/components/branches-table/branches-table.component.ts
index c5f12783..b20f0535 100644
--- a/client/src/app/components/branches-table/branches-table.component.ts
+++ b/client/src/app/components/branches-table/branches-table.component.ts
@@ -85,7 +85,7 @@ export class BranchTableComponent {
   }
 
   openBranch(branch: BranchInfoDTO): void {
-    this.router.navigate(['repo', branch.repository?.id, 'branch', branch.name]);
+    this.router.navigate(['repo', branch.repository?.id, 'ci-cd', 'branch', branch.name]);
   }
 
   convertBranchesToTreeNodes(branches: BranchInfoWithLink[]): TreeNode[] {
@@ -133,7 +133,6 @@ export class BranchTableComponent {
         }
       });
     });
-    console.log("root nodes", JSON.stringify(rootNodes, null, 2));
     return rootNodes;
   }
 
diff --git a/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html b/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html
index 68f02749..49aadac2 100644
--- a/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html
+++ b/client/src/app/components/environments/deployment-state-tag/deployment-state-tag.component.html
@@ -25,7 +25,7 @@
 
   @case ('QUEUED') {
     <!-- Queued State -->
-    <p-tag severity="warning" [rounded]="true">
+    <p-tag severity="warn" [rounded]="true">
       <i-tabler name="progress" class="!h-4 !w-4 mr-0.5"></i-tabler>
       Deployment queued
     </p-tag>
diff --git a/client/src/app/components/environments/environment-list/environment-list-view.component.html b/client/src/app/components/environments/environment-list/environment-list-view.component.html
index c6749219..a48b127d 100644
--- a/client/src/app/components/environments/environment-list/environment-list-view.component.html
+++ b/client/src/app/components/environments/environment-list/environment-list-view.component.html
@@ -1,7 +1,7 @@
 <div class="flex items-center justify-between mb-3">
   <input pInputText id="commit-hash" (input)="onSearch($event)" [value]="searchInput()" type="text" placeholder="Search for installed systems" class="w-1/3" />
   @if (!hideLinkToList()) {
-    <a [routerLink]="'/environments'" class="p-button p-2 p-button-secondary self-end">Manage environments</a>
+    <a [routerLink]="'/environments'" class="p-button p-2 self-end">Manage environments</a>
   }
 </div>
 
@@ -17,8 +17,8 @@
   }
 
   @for (environment of filteredEnvironments(); track environment.id) {
-    <p-accordionTab>
-      <ng-template pTemplate="header">
+    <p-accordion-panel [value]="environment.id">
+      <p-accordion-header>
         <div class="flex gap-2 items-center w-full">
           <span>{{ environment.name }}</span>
 
@@ -52,26 +52,28 @@
               ><i-tabler name="pencil"
             /></a>
           }
+          <span class="w-2"></span>
         </div>
-      </ng-template>
+      </p-accordion-header>
+      <p-accordion-content>
+        @if (environment.latestDeployment; as deployment) {
+          <app-environment-deployment-info [deployment]="deployment" />
+        }
 
-      @if (environment.latestDeployment; as deployment) {
-        <app-environment-deployment-info [deployment]="deployment" />
-      }
+        <div class="flex gap-4 items-center justify-between">
+          <div class="flex gap-1 mt-2 items-center">
+            <a icon [routerLink]="'/repo/' + environment.repository?.id + '/environment/' + environment.id + '/history'" class="p-button p-button-text text-gray-500 p-2"
+              ><i-tabler class="mr-1" name="history" />View Deployment History</a
+            >
+          </div>
 
-      <div class="flex gap-4 items-center justify-between">
-        <div class="flex gap-1 mt-2 items-center">
-          <a icon [routerLink]="'/repo/' + environment.repository?.id + '/environment/' + environment.id + '/history'" class="p-button p-button-text text-gray-500 p-2"
-            ><i-tabler class="mr-1" name="history" />View Deployment History</a
-          >
-        </div>
-
-        <div class="flex gap-1">
-          @for (installedApp of environment.installedApps; track installedApp) {
-            <p-tag> {{ installedApp }}</p-tag>
-          }
+          <div class="flex gap-1">
+            @for (installedApp of environment.installedApps; track installedApp) {
+              <p-tag> {{ installedApp }}</p-tag>
+            }
+          </div>
         </div>
-      </div>
-    </p-accordionTab>
+      </p-accordion-content>
+    </p-accordion-panel>
   }
 </p-accordion>
diff --git a/client/src/app/components/pull-request-table/pull-request-table.component.html b/client/src/app/components/pull-request-table/pull-request-table.component.html
index 411c960b..f9519cce 100644
--- a/client/src/app/components/pull-request-table/pull-request-table.component.html
+++ b/client/src/app/components/pull-request-table/pull-request-table.component.html
@@ -74,11 +74,7 @@
               }
             </td>
             <td>
-              <<<<<<< HEAD
               {{ dateService.formatDate(pr.createdAt, 'd. MMM y') }}
-              =======
-              {{ formatDate(pr.createdAt) }}
-              >>>>>>> ab496d4 (fix: remove deprecated modules)
             </td>
           </tr>
         </ng-template>
diff --git a/client/src/app/pages/branch-list/branch-list.component.html b/client/src/app/pages/branch-list/branch-list.component.html
new file mode 100644
index 00000000..b59daba8
--- /dev/null
+++ b/client/src/app/pages/branch-list/branch-list.component.html
@@ -0,0 +1 @@
+<app-branches-table />
diff --git a/client/src/app/pages/branch-list/branch-list.component.spec.ts b/client/src/app/pages/branch-list/branch-list.component.spec.ts
new file mode 100644
index 00000000..c8bee3fe
--- /dev/null
+++ b/client/src/app/pages/branch-list/branch-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BranchListComponent } from './branch-list.component';
+
+describe('BranchListComponent', () => {
+  let component: BranchListComponent;
+  let fixture: ComponentFixture<BranchListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BranchListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BranchListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/client/src/app/pages/branch-list/branch-list.component.ts b/client/src/app/pages/branch-list/branch-list.component.ts
new file mode 100644
index 00000000..149c5533
--- /dev/null
+++ b/client/src/app/pages/branch-list/branch-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { BranchTableComponent } from "../../components/branches-table/branches-table.component";
+
+@Component({
+  selector: 'app-branch-list',
+  imports: [BranchTableComponent],
+  templateUrl: './branch-list.component.html',
+})
+export class BranchListComponent {
+
+}
diff --git a/client/src/app/pages/ci-cd/ci-cd.component.html b/client/src/app/pages/ci-cd/ci-cd.component.html
index d50215f8..6b7afd4e 100644
--- a/client/src/app/pages/ci-cd/ci-cd.component.html
+++ b/client/src/app/pages/ci-cd/ci-cd.component.html
@@ -1,10 +1,11 @@
-<!-- TODO: IMPROVE THIS TO <p-tabs> WHEN NAVIGATION IS READY-->
+<p-tabs [(value)]="activeTabId">
+  <p-tablist>
+    @for (tab of tabs(); track tab.id) {
+      <p-tab [value]="tab.id" [routerLink]="tab.id">
+        {{ tab.label }}
+      </p-tab>
+    }
+  </p-tablist>
+</p-tabs>
 
-<p-tabMenu [model]="tabs()" [activeItem]="activeTab()" (activeItemChange)="onTabChange($event)"></p-tabMenu>
-
-@if (isTabActive('pr')) {
-  <app-pull-request-table />
-}
-@if (isTabActive('branches')) {
-  <app-branches-table />
-}
+<router-outlet />
diff --git a/client/src/app/pages/ci-cd/ci-cd.component.ts b/client/src/app/pages/ci-cd/ci-cd.component.ts
index b3480f79..72d6f37e 100644
--- a/client/src/app/pages/ci-cd/ci-cd.component.ts
+++ b/client/src/app/pages/ci-cd/ci-cd.component.ts
@@ -1,50 +1,26 @@
 import { Component, computed, Injectable, signal, inject } from '@angular/core';
-import { BranchTableComponent } from '@app/components/branches-table/branches-table.component';
-import { PullRequestTableComponent } from '@app/components/pull-request-table/pull-request-table.component';
+import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MenuItem } from 'primeng/api';
 import { TabMenuModule } from 'primeng/tabmenu';
 import { TabsModule } from 'primeng/tabs';
+import { filter, last, map } from 'rxjs';
 @Component({
   selector: 'app-ci-cd',
-  imports: [PullRequestTableComponent, BranchTableComponent, TabMenuModule, TabsModule],
+  imports: [RouterLink, RouterOutlet, TabMenuModule, TabsModule],
   templateUrl: './ci-cd.component.html',
 })
 export class CiCdComponent {
-  private stateService = inject(CiCdStateService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
 
   tabs = signal<{label: string, id: string}[]>([
     { label: 'Pull Requests', id: 'pr' },
-    { label: 'Branches', id: 'branches' }
+    { label: 'Branches', id: 'branch' }
   ]);
 
-  activeTab = computed(() => {
-    const activeTabId = this.stateService.getActiveTab()();
-    return this.tabs().find(tab => tab.id === activeTabId) || this.tabs()[0];
-  });
+  activeTabId = this.tabs()[0].id;
 
-  onTabChange(event: MenuItem) {
-    if (event.id) {
-      this.stateService.setActiveTab(event.id);
-    }
-  }
-
-  isTabActive(tabId: string): boolean {
-    return this.activeTab()?.id === tabId;
-  }
-}
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CiCdStateService {
-  private activeTabId = signal<string>('pr');
-
-  setActiveTab(tabId: string) {
-    this.activeTabId.set(tabId);
-  }
-
-  getActiveTab() {
-    return this.activeTabId;
+  ngOnInit() {
+    this.activeTabId = this.route.snapshot.firstChild?.url[0].path || this.tabs()[0].id;
   }
 }
diff --git a/client/src/app/pages/project-settings/project-settings.component.html b/client/src/app/pages/project-settings/project-settings.component.html
index 6240ca19..ca2d91fa 100644
--- a/client/src/app/pages/project-settings/project-settings.component.html
+++ b/client/src/app/pages/project-settings/project-settings.component.html
@@ -1,174 +1,132 @@
+{{ repositoryId() }}
 <div class="container mx-auto p-4">
-    <!-- Title and 'Add New Group' Button -->
-    <div class="flex justify-between items-center mb-4">
-        <h2 class="text-3xl font-bold">Project Settings</h2>
-        @if (!isLoading() && !isError()) {
-            <div class="space-x-2">
-                <button
-                        pButton
-                        label="Add New Group"
-                        class="p-button-sm"
-                        (click)="showAddGroupDialog = true"
-                ></button>
-                <button
-                        pButton
-                        label="Update Groups"
-                        class="p-button-success p-button-sm"
-                        (click)="updateGroups()"
-                        [disabled]="isLoading()"
-                ></button>
-            </div>
-        }
-    </div>
-
-    <!-- Error and Loading Messages -->
-    @if (isError()) {
-        <p class="text-red-600 mb-4">{{ errorMessage() }}</p>
+  <!-- Title and 'Add New Group' Button -->
+  <div class="flex justify-between items-center mb-4">
+    <h2 class="text-3xl font-bold">Project Settings</h2>
+    @if (!isLoading() && !isError()) {
+      <div class="space-x-2">
+        <button pButton label="Add New Group" class="p-button-sm" (click)="showAddGroupDialog = true"></button>
+        <button pButton label="Update Groups" class="p-button-success p-button-sm" (click)="updateGroups()" [disabled]="isLoading()"></button>
+      </div>
     }
+  </div>
 
-    @if (isLoading()) {
-        <p class="text-center mb-4">Loading settings...</p>
-    }
+  <!-- Error and Loading Messages -->
+  @if (isError()) {
+    <p class="text-red-600 mb-4">{{ errorMessage() }}</p>
+  }
 
-    <!-- Main Content -->
-    @if (!isLoading() && !isError()) {
-        <!-- Grouped Workflows Panels -->
-        <h3 class="text-2xl font-semibold mb-2">Grouped Workflows</h3>
+  @if (isLoading()) {
+    <p class="text-center mb-4">Loading settings...</p>
+  }
 
-        <!-- Drag & Drop Hint -->
-        @if (groupedWorkflowsArray().length > 0) {
-            <p class="text-sm text-gray-600 mb-4">
-                Drag and drop the groups to reorder them.
-            </p>
-        }
+  <!-- Main Content -->
+  @if (!isLoading() && !isError()) {
+    <!-- Grouped Workflows Panels -->
+    <h3 class="text-2xl font-semibold mb-2">Grouped Workflows</h3>
 
-        @if (groupedWorkflowsArray().length > 0) {
-            <div class="flex flex-wrap items-start gap-4 mb-8">
-                @for (group of localGroupedWorkflowsArray(); track group.groupName; let gIndex = $index) {
-                    <div
-                            class="flex items-center"
-                            pDraggable="groups"
-                            pDroppable="groups"
-                            (onDragStart)="dragStart(gIndex)"
-                            (onDrop)="drop(gIndex)"
-                    >
-                        <!-- Panel for this group -->
-                        <p-panel [header]="group.groupName" class="mr-2 min-w-[250px]">
-                            <div class="flex flex-col gap-4">
-                                @for (wf of group.workflows; track wf.id) {
-                                    <div
-                                            class="flex items-center space-x-2">
-                                        <i-tabler name="circle-check" class="text-green-500"></i-tabler>
-                                        <span class="font-medium w-36 flex items-center">{{ wf.name }}</span>
-                                    </div>
-                                }
-                                <!-- Delete Group Button -->
-                                @if (group.workflows.length === 0) {
-                                    <button
-                                            pButton
-                                            label="Delete Group"
-                                            class="p-button-danger p-button-sm self"
-                                            (click)="deleteGroup(group)"
-                                    ></button>
-                                }
-                            </div>
-                        </p-panel>
+    <!-- Drag & Drop Hint -->
+    @if (groupedWorkflowsArray().length > 0) {
+      <p class="text-sm text-gray-600 mb-4">Drag and drop the groups to reorder them.</p>
+    }
 
-                        <!-- Horizontal line between panels -->
-                        @if (group !== localGroupedWorkflowsArray()[localGroupedWorkflowsArray().length - 1]) {
-                            <div class="w-10 h-px bg-gray-300 mt-7"></div>
-                        }
-                    </div>
+    @if (groupedWorkflowsArray().length > 0) {
+      <div class="flex flex-wrap items-start gap-4 mb-8">
+        @for (group of localGroupedWorkflowsArray(); track group.groupName; let gIndex = $index) {
+          <div class="flex items-center" pDraggable="groups" pDroppable="groups" (onDragStart)="dragStart(gIndex)" (onDrop)="drop(gIndex)">
+            <!-- Panel for this group -->
+            <p-panel [header]="group.groupName" class="mr-2 min-w-[250px]">
+              <div class="flex flex-col gap-4">
+                @for (wf of group.workflows; track wf.id) {
+                  <div class="flex items-center space-x-2">
+                    <i-tabler name="circle-check" class="text-green-500"></i-tabler>
+                    <span class="font-medium w-36 flex items-center">{{ wf.name }}</span>
+                  </div>
                 }
-            </div>
-        } @else {
-            <!-- No Grouping Available -->
-            <div class="flex justify-center items-center h-40 mb-8">
-                <p-panel header="No Groups Available" class="min-w-[250px]">
-                    <p class="text-center">No workflows are currently grouped.</p>
-                    <p class="text-center">Click "Add New Group" to create a new group.</p>
-                    <p class="text-center">And then assign workflows to the group.</p>
-                </p-panel>
-            </div>
-        }
-
-        <!-- Workflow Table -->
-        <p-table [value]="workflows()" styleClass="w-full mb-6">
-            <ng-template pTemplate="header">
-                <tr>
-                    <th>Workflow ID</th>
-                    <th>Status</th>
-                    <th>File Name</th>
-                    <th>Workflow Name</th>
-                    <th>Assign Group</th>
-                    <th>Label</th>
-                </tr>
-            </ng-template>
-            <ng-template pTemplate="body" let-workflow>
-                <tr>
-                    <td>{{ workflow.id }}</td>
-                    <td>{{ workflow.state }}</td>
-                    <td>{{ workflow.fileNameWithExtension }}</td>
-                    <td>{{ workflow.name }}</td>
-                    <td>
-                        <p-dropdown
-                                [options]="groupDropdownOptions"
-                                [ngModel]="workflowGroupsMap()[workflow.id] || 'Ungrouped'"
-                                (onChange)="onChangeGroup(workflow, $event.value)"
-                                [appendTo]="'body'"
-                        ></p-dropdown>
-                    </td>
-                    <td>
-                        <p-dropdown
-                                [options]="getWorkflowLabelOptions()"
-                                [(ngModel)]="workflow.label"
-                                placeholder="Select Label"
-                                (onChange)="onChangeLabel(workflow)"
-                                [appendTo]="'body'"
-                        ></p-dropdown>
-                    </td>
+                <!-- Delete Group Button -->
+                @if (group.workflows.length === 0) {
+                  <button pButton label="Delete Group" class="p-button-danger p-button-sm self" (click)="deleteGroup(group)"></button>
+                }
+              </div>
+            </p-panel>
 
-                </tr>
-            </ng-template>
-        </p-table>
+            <!-- Horizontal line between panels -->
+            @if (group !== localGroupedWorkflowsArray()[localGroupedWorkflowsArray().length - 1]) {
+              <div class="w-10 h-px bg-gray-300 mt-7"></div>
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <!-- No Grouping Available -->
+      <div class="flex justify-center items-center h-40 mb-8">
+        <p-panel header="No Groups Available" class="min-w-[250px]">
+          <p class="text-center">No workflows are currently grouped.</p>
+          <p class="text-center">Click "Add New Group" to create a new group.</p>
+          <p class="text-center">And then assign workflows to the group.</p>
+        </p-panel>
+      </div>
     }
 
-    <!-- Dialog for Adding New Group -->
-    <p-dialog
-            header="Add New Group"
-            [(visible)]="showAddGroupDialog"
-            [modal]="true"
-            [closable]="true"
-            [dismissableMask]="true"
-            [draggable]="false"
-            [style]="{ width: '350px' }"
-            (onHide)="resetDialog()"
-    >
-        <div class="flex flex-col gap-2 p-2">
-            <label class="font-semibold" for="groupNameInput">Group Name</label>
-            <input
-                    id="groupNameInput"
-                    type="text"
-                    pInputText
-                    [(ngModel)]="newGroupName"
-                    class="w-full p-2 border border-gray-300 rounded"
-                    placeholder="Enter new group name"
-            />
+    <!-- Workflow Table -->
+    <p-table [value]="workflows()" styleClass="w-full mb-6">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>Workflow ID</th>
+          <th>Status</th>
+          <th>File Name</th>
+          <th>Workflow Name</th>
+          <th>Assign Group</th>
+          <th>Label</th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-workflow>
+        <tr>
+          <td>{{ workflow.id }}</td>
+          <td>{{ workflow.state }}</td>
+          <td>{{ workflow.fileNameWithExtension }}</td>
+          <td>{{ workflow.name }}</td>
+          <td>
+            <p-dropdown
+              [options]="groupDropdownOptions"
+              [ngModel]="workflowGroupsMap()[workflow.id] || 'Ungrouped'"
+              (onChange)="onChangeGroup(workflow, $event.value)"
+              [appendTo]="'body'"
+            ></p-dropdown>
+          </td>
+          <td>
+            <p-dropdown
+              [options]="getWorkflowLabelOptions()"
+              [(ngModel)]="workflow.label"
+              placeholder="Select Label"
+              (onChange)="onChangeLabel(workflow)"
+              [appendTo]="'body'"
+            ></p-dropdown>
+          </td>
+        </tr>
+      </ng-template>
+    </p-table>
+  }
+
+  <!-- Dialog for Adding New Group -->
+  <p-dialog
+    header="Add New Group"
+    [(visible)]="showAddGroupDialog"
+    [modal]="true"
+    [closable]="true"
+    [dismissableMask]="true"
+    [draggable]="false"
+    [style]="{ width: '350px' }"
+    (onHide)="resetDialog()"
+  >
+    <div class="flex flex-col gap-2 p-2">
+      <label class="font-semibold" for="groupNameInput">Group Name</label>
+      <input id="groupNameInput" type="text" pInputText [(ngModel)]="newGroupName" class="w-full p-2 border border-gray-300 rounded" placeholder="Enter new group name" />
 
-            <div class="flex justify-end gap-2 mt-4">
-                <button
-                        pButton
-                        label="Cancel"
-                        class="p-button-text"
-                        (click)="showAddGroupDialog = false"
-                ></button>
-                <button
-                        pButton
-                        label="Add"
-                        class="p-button-primary"
-                        (click)="addNewGroup()"
-                ></button>
-            </div>
-        </div>
-    </p-dialog>
+      <div class="flex justify-end gap-2 mt-4">
+        <button pButton label="Cancel" class="p-button-text" (click)="showAddGroupDialog = false"></button>
+        <button pButton label="Add" class="p-button-primary" (click)="addNewGroup()"></button>
+      </div>
+    </div>
+  </p-dialog>
 </div>
diff --git a/client/src/app/pages/pull-request-details/pull-request-details.component.html b/client/src/app/pages/pull-request-details/pull-request-details.component.html
index 14d785e3..e10a462f 100644
--- a/client/src/app/pages/pull-request-details/pull-request-details.component.html
+++ b/client/src/app/pages/pull-request-details/pull-request-details.component.html
@@ -9,7 +9,7 @@ <h2 class="text-3xl" [innerHTML]="pr.title | markdown"></h2>
             {{ pr.state }}
           </p-tag>
           @if (pr.isDraft) {
-            <p-tag severity="warning">DRAFT</p-tag>
+            <p-tag severity="warn">DRAFT</p-tag>
           }
           @if (pr.isMerged) {
             <p-tag severity="info">MERGED</p-tag>
diff --git a/client/src/app/pages/pull-request-list/pull-request-list.component.html b/client/src/app/pages/pull-request-list/pull-request-list.component.html
new file mode 100644
index 00000000..1e3f0956
--- /dev/null
+++ b/client/src/app/pages/pull-request-list/pull-request-list.component.html
@@ -0,0 +1 @@
+<app-pull-request-table />
diff --git a/client/src/app/pages/pull-request-list/pull-request-list.component.spec.ts b/client/src/app/pages/pull-request-list/pull-request-list.component.spec.ts
new file mode 100644
index 00000000..bcccaec8
--- /dev/null
+++ b/client/src/app/pages/pull-request-list/pull-request-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PullRequestListComponent } from './pull-request-list.component';
+
+describe('PullRequestListComponent', () => {
+  let component: PullRequestListComponent;
+  let fixture: ComponentFixture<PullRequestListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PullRequestListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PullRequestListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/client/src/app/pages/pull-request-list/pull-request-list.component.ts b/client/src/app/pages/pull-request-list/pull-request-list.component.ts
new file mode 100644
index 00000000..1dcca8a8
--- /dev/null
+++ b/client/src/app/pages/pull-request-list/pull-request-list.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { PullRequestTableComponent } from "../../components/pull-request-table/pull-request-table.component";
+
+@Component({
+  selector: 'app-pull-request-list',
+  imports: [PullRequestTableComponent],
+  templateUrl: './pull-request-list.component.html',
+})
+export class PullRequestListComponent {
+
+}