chore(deps): Update primeng to v19.0.1 (#52)

client/angular.json

@@ -27,10 +27,7 @@
               }
             ],
             "styles": [
-              "src/styles.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css"
+              "src/styles.css"
             ],
             "scripts": []
           },
@@ -97,10 +94,7 @@
               }
             ],
             "styles": [
-              "src/styles.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css"
+              "src/styles.css"
             ],
             "scripts": []
           }

client/package.json

@@ -10,34 +10,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.0-next.0",
-    "@angular/common": "^19.0.0-next.0",
-    "@angular/compiler": "^19.0.0-next.0",
-    "@angular/core": "^19.0.0-next.0",
-    "@angular/forms": "^19.0.0-next.0",
-    "@angular/platform-browser": "^19.0.0-next.0",
-    "@angular/platform-browser-dynamic": "^19.0.0-next.0",
-    "@angular/router": "^19.0.0-next.0",
     "@hey-api/client-fetch": "^0.5.6",
     "@tanstack/angular-query-experimental": "^5.62.8",
+    "@angular/animations": "^19.0.4",
+    "@angular/common": "^19.0.4",
+    "@angular/compiler": "^19.0.4",
+    "@angular/core": "^19.0.4",
+    "@angular/forms": "^19.0.4",
+    "@angular/platform-browser": "^19.0.4",
+    "@angular/platform-browser-dynamic": "^19.0.4",
+    "@angular/router": "^19.0.4",
+    "@primeng/themes": "19.0.1",
     "angular-tabler-icons": "^3.1.0",
     "eslint-config-prettier": "^9.1.0",
     "keycloak-js": "^26.0.7",
     "marked": "^15.0.3",
     "primeicons": "^7.0.0",
-    "primeng": "^17.18.11",
+    "primeng": "19.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.0.0-rc.1",
+    "@angular-devkit/build-angular": "^19.0.5",
     "@angular-eslint/builder": "^18.4.0",
     "@angular-eslint/eslint-plugin": "^18.4.0",
     "@angular-eslint/eslint-plugin-template": "^18.4.0",
     "@angular-eslint/schematics": "^18.4.0",
     "@angular-eslint/template-parser": "^18.4.0",
-    "@angular/cli": "^19.0.0-rc.1",
-    "@angular/compiler-cli": "^19.0.0-next.0",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.4",
     "@hey-api/openapi-ts": "^0.60.0",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^22.9.0",
@@ -58,6 +59,7 @@
     "postcss": "^8.4.48",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-primeui": "^0.3.4",
     "typescript": "~5.6.2"
   }
-}
+}

client/src/app/app.config.ts

@@ -1,9 +1,12 @@
 import { provideAppInitializer, ApplicationConfig, inject, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding, withRouterConfig } from '@angular/router';
 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';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { MessageService } from 'primeng/api';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -31,6 +34,34 @@ const queryClient = new QueryClient({
 export const appConfig: ApplicationConfig = {
   providers: [
     DatePipe,
+    providePrimeNG({
+      theme: {
+        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: {
+            name: 'primeng',
+            order: 'tailwind-base, primeng, tailwind-utilities'
+          }
+        }
+      }
+    }),
     provideExperimentalZonelessChangeDetection(),
     provideRouter(routes, withComponentInputBinding(), withRouterConfig({ paramsInheritanceStrategy: 'always' })),
     provideAnimationsAsync(),

client/src/app/app.routes.ts

@@ -17,18 +17,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',
@@ -49,7 +37,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',

client/src/app/components/branches-table/branches-table.component.ts

@@ -65,7 +65,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[] {
@@ -113,7 +113,6 @@ export class BranchTableComponent {
         }
       });
     });
-    console.log("root nodes", JSON.stringify(rootNodes, null, 2));
     return rootNodes;
   }
 

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>

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>
 
@@ -50,26 +50,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>

client/src/app/components/forms/environment-edit-form/environment-edit-form.component.html

@@ -20,7 +20,7 @@
 
       <div class="flex flex-col gap-2">
         <label for="installed-apps">Installed Apps</label>
-        <p-chips id="installed-apps" formControlName="installedApps"></p-chips>
+        <p-autoComplete id="installed-apps" formControlName="installedApps" [multiple]="true" [minLength]="1" fluid [typeahead]="false"> </p-autoComplete>
       </div>
 
       <p-button type="submit">Update</p-button>

client/src/app/components/forms/environment-edit-form/environment-edit-form.component.ts

@@ -3,15 +3,15 @@ import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angula
 import { ButtonModule } from 'primeng/button';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { InputTextModule } from 'primeng/inputtext';
-import { ChipsModule } from 'primeng/chips';
+import { AutoCompleteModule } from 'primeng/autocomplete';
 import { ActivatedRoute, Router } from '@angular/router';
 import { injectMutation, injectQuery, injectQueryClient } from '@tanstack/angular-query-experimental';
 import { getAllEnvironmentsQueryKey, getEnvironmentByIdOptions, getEnvironmentByIdQueryKey, updateEnvironmentMutation } from '@app/core/modules/openapi/@tanstack/angular-query-experimental.gen';
 import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'app-environment-edit-form',
-  imports: [ReactiveFormsModule, InputTextModule, InputSwitchModule, ButtonModule, ChipsModule],
+  imports: [AutoCompleteModule, ReactiveFormsModule, InputTextModule, InputSwitchModule, ButtonModule],
   templateUrl: './environment-edit-form.component.html',
 })
 export class EnvironmentEditFormComponent implements OnInit {

client/src/app/components/pull-request-table/pull-request-table.component.html

@@ -42,10 +42,10 @@
         <ng-template pTemplate="body" let-pr>
           <tr class="cursor-pointer" (click)="openPR(pr)">
             <td>
-              <div class="flex align-items-center gap-2">
+              <div class="flex items-center gap-2">
                 <i-tabler name="git-pull-request"></i-tabler>
                 <span class="font-bold"><span [innerHTML]="pr.title | markdown"></span></span>
-                <button pButton class="p-button-text p-button-sm" (click)="openPRExternal(pr)"><i-tabler name="external-link"></i-tabler></button>
+                <p-button [link]="true" (click)="openPRExternal(pr)"><i-tabler name="external-link"></i-tabler></p-button>
               </div>
             </td>
             <td>

client/src/app/components/pull-request-table/pull-request-table.component.ts

@@ -6,18 +6,18 @@ import { TableModule } from 'primeng/table';
 import { AvatarModule } from 'primeng/avatar';
 import { TagModule } from 'primeng/tag';
 import { injectQuery } from '@tanstack/angular-query-experimental';
-import { catchError, tap } from 'rxjs';
 import { IconsModule } from 'icons.module';
 import { SkeletonModule } from 'primeng/skeleton';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DateService } from '@app/core/services/date.service';
 import { getAllPullRequestsOptions } from '@app/core/modules/openapi/@tanstack/angular-query-experimental.gen';
 import { PullRequestInfoDto } from '@app/core/modules/openapi';
+import { ButtonModule } from 'primeng/button';
 
 
 @Component({
   selector: 'app-pull-request-table',
-  imports: [TableModule, AvatarModule, TagModule, IconsModule, SkeletonModule, AvatarGroupModule, TooltipModule, MarkdownPipe],
+  imports: [TableModule, AvatarModule, TagModule, IconsModule, SkeletonModule, AvatarGroupModule, TooltipModule, MarkdownPipe, ButtonModule],
   templateUrl: './pull-request-table.component.html',
   styles: [`
     :host ::ng-deep {

client/src/app/pages/branch-list/branch-list.component.html

@@ -0,0 +1 @@
+<app-branches-table />

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();
+  });
+});

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 {
+
+}

client/src/app/pages/ci-cd/ci-cd.component.html

@@ -1,8 +1,11 @@
-<p-tabMenu [model]="tabs()" [activeItem]="activeTab()" (activeItemChange)="onTabChange($event)"></p-tabMenu>
+<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>
 
-@if (isTabActive('pr')) {
-<app-pull-request-table />
-}
-@if (isTabActive('branches')) {
-<app-branches-table />
-}
+<router-outlet />