Skip to content

Commit

Permalink
fix: migrate to v19
Browse files Browse the repository at this point in the history
  • Loading branch information
thielpa committed Dec 23, 2024
1 parent fbb23b1 commit b72de39
Show file tree
Hide file tree
Showing 16 changed files with 273 additions and 245 deletions.
19 changes: 18 additions & 1 deletion client/src/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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: {
Expand Down
35 changes: 22 additions & 13 deletions client/src/app/app.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[] {
Expand Down Expand Up @@ -133,7 +133,6 @@ export class BranchTableComponent {
}
});
});
console.log("root nodes", JSON.stringify(rootNodes, null, 2));
return rootNodes;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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>

Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<app-branches-table />
23 changes: 23 additions & 0 deletions client/src/app/pages/branch-list/branch-list.component.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
11 changes: 11 additions & 0 deletions client/src/app/pages/branch-list/branch-list.component.ts
Original file line number Diff line number Diff line change
@@ -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 {

}
19 changes: 10 additions & 9 deletions client/src/app/pages/ci-cd/ci-cd.component.html
Original file line number Diff line number Diff line change
@@ -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 />
42 changes: 9 additions & 33 deletions client/src/app/pages/ci-cd/ci-cd.component.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit b72de39

Please sign in to comment.