refactor: pr/branch details & environment views

client/src/app/components/deployment-selection/deployment-selection.component.html

@@ -1,8 +1,10 @@
+<!-- Divider -->
+<div class="flex justify-center">
+  <p-divider class="w-full mt-4" />
+</div>
+
 <div class="mb-4">
   <h3 class="text-xl mb-1">Deployment</h3>
-  <p class="text-secondary-500 text-sm">
-    You can deploy this branch to any available environment. If all environments are in use, you will have to request someone to unlock an environment for you.
-  </p>
 </div>
 
 <app-environment-list-view [deployable]="true" (deploy)="handleDeploy($event)" />

client/src/app/components/deployment-selection/deployment-selection.component.ts

@@ -10,11 +10,12 @@ import { injectMutation, QueryClient } from '@tanstack/angular-query-experimenta
 import { MessageService } from 'primeng/api';
 import { EnvironmentListViewComponent } from '../environments/environment-list/environment-list-view.component';
 import { celebrateDeployment } from '@app/core/services/particle.service';
+import { Divider } from 'primeng/divider';
 
 @Component({
   selector: 'app-deployment-selection',
   templateUrl: './deployment-selection.component.html',
-  imports: [EnvironmentListViewComponent],
+  imports: [EnvironmentListViewComponent, Divider],
 })
 export class DeploymentSelectionComponent {
   private messageService = inject(MessageService);

client/src/app/components/environments/environment-accordion/environment-accordion.component.html

@@ -1,4 +1,4 @@
-<p-accordion-panel [value]="environment().id" [ngClass]="{ 'border-2 border-blue-500 rounded-lg': isLockedByCurrentUser() }">
+<p-accordion-panel [value]="environment().id" [ngClass]="{ 'border-2 border-blue-500 rounded-lg': isLockedByCurrentUser(), 'border-none': !isLockedByCurrentUser() }">
   <p-accordion-header>
     <div class="flex gap-2 items-start w-full flex-wrap md:flex-nowrap flex-col md:items-center md:flex-row">
       <div class="flex flex-col gap-1 flex-wrap">

client/src/app/components/environments/environment-actions/environment-actions.component.html

@@ -41,13 +41,11 @@
       <!-- Lock/Unlock Controls -->
       @if (environment().enabled && environment().type === 'TEST') {
         @if (!environment().locked) {
-          @if (deployable()) {
-            <p-button (click)="onLock($event)" [disabled]="!canUserDeploy()" [pTooltip]="getLockTooltip()" tooltipPosition="top">
-              <div class="flex items-center">
-                <i-tabler name="lock" class="w-4 h-4 flex-shrink-0 text-red-700" />
-              </div>
-            </p-button>
-          }
+          <p-button (click)="onLock($event)" [disabled]="!canUserDeploy()" [pTooltip]="getLockTooltip()" tooltipPosition="top">
+            <div class="flex items-center">
+              <i-tabler name="lock" class="w-4 h-4 flex-shrink-0 text-red-700" />
+            </div>
+          </p-button>
         } @else {
           @if (canUnlockShow()) {
             <p-button severity="danger" class="[&>*]:!rounded-none" (click)="onUnlock($event)" [disabled]="!canUnlock()" [pTooltip]="getUnlockToolTip()" tooltipPosition="top">

client/src/app/components/environments/environment-list/environment-list-view.component.html

@@ -69,34 +69,49 @@ <h5 class="font-semibold text-sm mb-2">Environment Type</h5>
       <p>No environments found for the search criteria, try something else or adjust filters.</p>
     }
   } @else {
-    @for (group of environmentGroups(); track group[0]) {
-      @if (group[1].length > 0) {
-        <div class="mb-4">
-          <h3 class="text-lg font-semibold mb-2">{{ capitalizeFirstLetter(group[0]) }}</h3>
-          <p-accordion [multiple]="true">
-            @for (environment of group[1]; track environment.id) {
-              <app-environment-accordion
-                [environment]="environment"
-                [deployable]="!!deployable()"
-                [canViewAllEnvironments]="!!canViewAllEnvironments()"
-                [timeUntilReservationExpires]="timeUntilReservationExpires().get(environment.id)"
-                [isLockedByCurrentUser]="isCurrentUserLocked(environment)"
-                (deploy)="deployEnvironment($event)"
-                (unlock)="onUnlockEnvironment($event.event, $event.environment)"
-                (extend)="extendLock($event.event, $event.environment)"
-                (lock)="lockEnvironment($event)"
-                (cancelDeployment)="cancelDeployment($event)"
-              >
-              </app-environment-accordion>
-            }
-          </p-accordion>
-        </div>
+    <div class="mt-6">
+      @for (group of environmentGroups(); track group[0]) {
+        @if (group[1].length > 0) {
+          <div class="mb-2 mt-2">
+            <div style="width: 100%" class="font-bold mx-auto">
+              <p-divider align="center">
+                <h4 class="m-0">{{ capitalizeFirstLetter(group[0]) }}</h4>
+              </p-divider>
+            </div>
+
+            <p-accordion [multiple]="true">
+              @for (environment of group[1]; track environment.id; let isLast = $last; let isFirst = $first) {
+                @if (!isFirst) {
+                  <!-- Divider -->
+                  <div class="flex justify-center">
+                    <p-divider class="w-full" />
+                  </div>
+                }
+
+                <app-environment-accordion
+                  [environment]="environment"
+                  [deployable]="!!deployable()"
+                  [canViewAllEnvironments]="!!canViewAllEnvironments()"
+                  [timeUntilReservationExpires]="timeUntilReservationExpires().get(environment.id)"
+                  [isLockedByCurrentUser]="isCurrentUserLocked(environment)"
+                  (deploy)="deployEnvironment($event)"
+                  (unlock)="onUnlockEnvironment($event.event, $event.environment)"
+                  (extend)="extendLock($event.event, $event.environment)"
+                  (lock)="lockEnvironment($event)"
+                  (cancelDeployment)="cancelDeployment($event)"
+                >
+                </app-environment-accordion>
+              }
+            </p-accordion>
+          </div>
+        }
       }
-    }
-    @if (deployDialogVisible()) {
-      <app-deploy-confirmation [(isVisible)]="deployDialogVisible" [environment]="selectedEnv()!" (confirmed)="onDeployDialogConfirmed($event)"></app-deploy-confirmation>
-    } @else if (lockDialogVisible()) {
-      <app-lock-confirmation [(isVisible)]="lockDialogVisible" [environment]="selectedEnv()!" (confirmed)="onLockEnvironmentConfirmed($event)"></app-lock-confirmation>
-    }
+
+      @if (deployDialogVisible()) {
+        <app-deploy-confirmation [(isVisible)]="deployDialogVisible" [environment]="selectedEnv()!" (confirmed)="onDeployDialogConfirmed($event)"></app-deploy-confirmation>
+      } @else if (lockDialogVisible()) {
+        <app-lock-confirmation [(isVisible)]="lockDialogVisible" [environment]="selectedEnv()!" (confirmed)="onLockEnvironmentConfirmed($event)"></app-lock-confirmation>
+      }
+    </div>
   }
 }

client/src/app/components/pipeline/pipeline.component.html

@@ -1,4 +1,11 @@
-<h3 class="text-xl mb-2">Pipeline</h3>
+<!-- Divider -->
+<div class="flex justify-center">
+  <p-divider class="w-full mt-4" />
+</div>
+
+<div class="mb-4">
+  <h3 class="text-xl mb-2">Pipeline</h3>
+</div>
 
 @if (branchQuery.isPending() && pullRequestQuery.isPending()) {
   <div class="flex items-start mt-2 gap-4">
@@ -85,7 +92,5 @@ <h3 class="text-xl mb-2">Pipeline</h3>
         </div>
       }
     </div>
-
-    <app-pipeline-test-results [selector]="selector()" />
   }
 }

client/src/app/components/pipeline/pipeline.component.ts

@@ -11,7 +11,6 @@ import {
 } from '@app/core/modules/openapi/@tanstack/angular-query-experimental.gen';
 import { SkeletonModule } from 'primeng/skeleton';
 import { WorkflowRunDto } from '@app/core/modules/openapi';
-import { PipelineTestResultsComponent } from './test-results/pipeline-test-results.component';
 import { DividerModule } from 'primeng/divider';
 import { provideTablerIcons, TablerIconComponent } from 'angular-tabler-icons';
 import { IconCircleCheck, IconCircleX, IconExclamationCircle, IconExternalLink, IconInfoCircle, IconProgress, IconProgressHelp, IconBrandGithub } from 'angular-tabler-icons/icons';
@@ -37,7 +36,7 @@ export interface Pipeline {
 
 @Component({
   selector: 'app-pipeline',
-  imports: [TableModule, DividerModule, ButtonModule, ProgressSpinnerModule, PanelModule, TablerIconComponent, TooltipModule, SkeletonModule, PipelineTestResultsComponent],
+  imports: [TableModule, DividerModule, ButtonModule, ProgressSpinnerModule, PanelModule, TablerIconComponent, TooltipModule, SkeletonModule],
   providers: [
     provideTablerIcons({
       IconInfoCircle,

client/src/app/components/pipeline/test-results/pipeline-test-results.component.html

@@ -1,11 +1,18 @@
 @if (hasTestSuites() || isProcessing()) {
+  <!-- Divider -->
+  <div class="flex justify-center">
+    <p-divider class="w-full mt-4" />
+  </div>
+
+  <div class="mb-4">
+    <h3 class="text-xl mb-2">Test Results</h3>
+  </div>
+
   <button [disabled]="!hasTestSuites()" severity="secondary" text class="flex items-center gap-2 w-full mb-2 mt-8" (click)="isTestResultsCollapsed = !isTestResultsCollapsed">
     @if (resultsHaveUpdated()) {
       <p-tag [severity]="'info'" [rounded]="true" pTooltip="Since the last commit, the test results changed">Changed</p-tag>
     }
 
-    <h3 class="text-lg">Test Results</h3>
-
     @if (isProcessing()) {
       <p-tag class="ml-2" severity="warn" [rounded]="true" [pTooltip]="'Test results are being processed'">
         <i-tabler name="progress" class="!size-5 animate-spin"></i-tabler>
@@ -26,7 +33,7 @@ <h3 class="text-lg">Test Results</h3>
     }
 
     @if (hasTestSuites()) {
-      <i-tabler [name]="isTestResultsCollapsed ? 'chevron-down' : 'chevron-up'" class="ml-auto"></i-tabler>
+      <i-tabler [name]="isTestResultsCollapsed ? 'chevron-up' : 'chevron-down'" class="ml-auto"></i-tabler>
     }
   </button>
 

client/src/app/components/pipeline/test-results/pipeline-test-results.component.ts

@@ -39,6 +39,7 @@ import {
   IconProgress,
   IconX,
 } from 'angular-tabler-icons/icons';
+import { Divider } from 'primeng/divider';
 
 // Define log level interface and constants
 interface LogLevel {
@@ -80,6 +81,7 @@ const LOG_LEVELS: LogLevel[] = [
     TabViewModule,
     DialogModule,
     SliderModule,
+    Divider,
   ],
   providers: [
     provideTablerIcons({

client/src/app/pages/pull-request-details/pull-request-details.component.html

@@ -45,6 +45,7 @@ <h2 class="text-2xl">
 
 <div class="flex flex-col gap-6">
   <app-pipeline [selector]="pipelineSelector()" />
+  <app-pipeline-test-results [selector]="pipelineSelector()" />
   @if (query.data(); as pr) {
     @if (pr.headRefRepoNameWithOwner === pr.repository?.nameWithOwner) {
       <app-deployment-selection [sourceRef]="pr.headRefName" [commitSha]="pr.headSha" />

client/src/app/pages/pull-request-details/pull-request-details.component.ts

@@ -13,6 +13,7 @@ import { UserAvatarComponent } from '@app/components/user-avatar/user-avatar.com
 import { PullRequestStatusIconComponent } from '@app/components/pull-request-status-icon/pull-request-status-icon.component';
 import { provideTablerIcons, TablerIconComponent } from 'angular-tabler-icons';
 import { IconGitBranch } from 'angular-tabler-icons/icons';
+import { PipelineTestResultsComponent } from '@app/components/pipeline/test-results/pipeline-test-results.component';
 
 @Component({
   selector: 'app-branch-details',
@@ -27,6 +28,7 @@ import { IconGitBranch } from 'angular-tabler-icons/icons';
     SkeletonModule,
     UserAvatarComponent,
     PullRequestStatusIconComponent,
+    PipelineTestResultsComponent,
   ],
   providers: [
     provideTablerIcons({