From 8d473eaead358daf151b93b3f192faeac1643a2c Mon Sep 17 00:00:00 2001
From: Andreas Awouters <andreas.awouters@atmire.com>
Date: Tue, 6 Feb 2024 10:10:26 +0100
Subject: [PATCH] 111638: Show process ID instead of status

---
 .../overview/table/process-overview-table.component.html      | 4 ++--
 .../overview/table/process-overview-table.component.scss      | 4 ++--
 .../overview/table/process-overview-table.component.spec.ts   | 4 ++--
 src/styles/_custom_variables.scss                             | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/process-page/overview/table/process-overview-table.component.html b/src/app/process-page/overview/table/process-overview-table.component.html
index cb3b2f1739..531bb367a9 100644
--- a/src/app/process-page/overview/table/process-overview-table.component.html
+++ b/src/app/process-page/overview/table/process-overview-table.component.html
@@ -27,7 +27,7 @@
           <table class="table table-striped table-hover">
             <thead>
             <tr>
-              <th scope="col" class="status-header">{{'process.overview.table.status' | translate}}</th>
+              <th scope="col" class="id-header">{{'process.overview.table.id' | translate}}</th>
               <th scope="col" class="name-header">{{'process.overview.table.name' | translate}}</th>
               <th scope="col" class="user-header">{{'process.overview.table.user' | translate}}</th>
               <th scope="col" class="info-header">{{'process.overview.table.' + processStatus.toLowerCase() + '.info' | translate}}</th>
@@ -38,7 +38,7 @@
             <tbody>
             <tr *ngFor="let tableEntry of processesRD?.payload?.page"
                 [class.table-danger]="processBulkDeleteService.isToBeDeleted(tableEntry.process.processId)">
-              <td>{{tableEntry.process.processStatus}}</td>
+              <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.processId}}</a></td>
               <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.scriptName}}</a></td>
               <td>{{tableEntry.user}}</td>
               <td>{{tableEntry.info}}</td>
diff --git a/src/app/process-page/overview/table/process-overview-table.component.scss b/src/app/process-page/overview/table/process-overview-table.component.scss
index e83f1f268a..a9567be4c7 100644
--- a/src/app/process-page/overview/table/process-overview-table.component.scss
+++ b/src/app/process-page/overview/table/process-overview-table.component.scss
@@ -7,8 +7,8 @@
   vertical-align: middle;
 }
 
-.status-header {
-  width: var(--ds-process-overview-table-status-column-width);
+.id-header {
+  width: var(--ds-process-overview-table-id-column-width);
 }
 
 .name-header {
diff --git a/src/app/process-page/overview/table/process-overview-table.component.spec.ts b/src/app/process-page/overview/table/process-overview-table.component.spec.ts
index eb9bff959c..20217a799a 100644
--- a/src/app/process-page/overview/table/process-overview-table.component.spec.ts
+++ b/src/app/process-page/overview/table/process-overview-table.component.spec.ts
@@ -143,10 +143,10 @@ describe('ProcessOverviewTableComponent', () => {
       expect(rowElements.length).toEqual(3);
     });
 
-    it('should display the process\' status in the first column', () => {
+    it('should display the process\' ID in the first column', () => {
       rowElements.forEach((rowElement, index) => {
         const el = rowElement.query(By.css('td:nth-child(1)')).nativeElement;
-        expect(el.textContent).toContain(processes[index].processStatus);
+        expect(el.textContent).toContain(processes[index].processId);
       });
     });
 
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 14279246ba..1e4ac2570e 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -99,7 +99,7 @@
   --ds-dso-edit-virtual-tooltip-min-width: 300px;
 
   --ds-process-overview-table-nb-processes-badge-size: 0.5em;
-  --ds-process-overview-table-status-column-width: 150px;
+  --ds-process-overview-table-id-column-width: 120px;
   --ds-process-overview-table-name-column-width: auto;
   --ds-process-overview-table-user-column-width: 200px;
   --ds-process-overview-table-info-column-width: 250px;