107873: Add number of processes badge

src/app/process-page/overview/table/process-overview-table.component.html

@@ -1,7 +1,15 @@
 <div class="container mb-4">
   <div class="d-flex" (click)="collapse.toggle()" [attr.aria-expanded]="!collapse.collapsed" role="button">
-    <h2 class="flex-grow-1">{{'process.overview.table.' + processStatus.toLowerCase() + '.title' | translate}}<span class="ml-2 toggle-icon"
+    <h2 class="flex-grow-1">
-    ><i class="fas" [ngClass]="collapse.collapsed ? 'fa-angle-right' : 'fa-angle-down'"></i></span></h2>
+      {{'process.overview.table.' + processStatus.toLowerCase() + '.title' | translate}}
+      <span class="badge badge-pill badge-primary badge-nb-processes"
+            *ngIf="(processesRD$ | async) as processesRD">
+        {{processesRD?.payload?.totalElements}}
+      </span>
+      <span class="ml-2 toggle-icon">
+        <i class="fas" [ngClass]="collapse.collapsed ? 'fa-angle-right' : 'fa-angle-down'"></i>
+      </span>
+    </h2>
   </div>
 
   <div ngbCollapse #collapse="ngbCollapse">

src/app/process-page/overview/table/process-overview-table.component.scss

@@ -2,6 +2,11 @@
   font-size: calc(var(--bs-small-font-size) * 0.6);
 }
 
+.badge-nb-processes {
+  font-size: var(--ds-process-overview-table-nb-processes-badge-size);
+  vertical-align: middle;
+}
+
 .status-header {
   width: var(--ds-process-overview-table-status-column-width);
 }

src/styles/_custom_variables.scss

@@ -98,6 +98,7 @@
   --ds-dso-edit-actions-width: 173px;
   --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-name-column-width: auto;
   --ds-process-overview-table-user-column-width: 200px;