From 4e10e5fefdec1663035350a3c431c3a784ff57ff Mon Sep 17 00:00:00 2001
From: LenaelleRelief <lenaelle@reliefapplications.org>
Date: Wed, 18 Oct 2023 13:05:27 +0200
Subject: [PATCH 1/3] remove unnecessary white row

---
 .../role-features/role-workflows/role-workflows.component.html   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html b/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
index 579a79b9ef..fa2ece5471 100644
--- a/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
+++ b/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
@@ -63,6 +63,7 @@ <h2>{{ 'common.workflow.few' | translate }}</h2>
         uiCell
         *cdkCellDef="let element"
         [attr.colspan]="displayedColumns.length"
+        [ngClass]="element.id === openedWorkflowId? '' : 'hidden'"
       >
         <div
           class="overflow-hidden flex justify-center"

From 799f2bfbd29a83ee813dc3a5dc0be1739f3f66b2 Mon Sep 17 00:00:00 2001
From: LenaelleRelief <lenaelle@reliefapplications.org>
Date: Wed, 18 Oct 2023 16:39:53 +0200
Subject: [PATCH 2/3] replace uiTableWrapper with custom classes

---
 .../role-workflows.component.html             | 100 ++++++++++--------
 1 file changed, 53 insertions(+), 47 deletions(-)

diff --git a/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html b/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
index fa2ece5471..7216b82c96 100644
--- a/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
+++ b/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
@@ -63,7 +63,7 @@ <h2>{{ 'common.workflow.few' | translate }}</h2>
         uiCell
         *cdkCellDef="let element"
         [attr.colspan]="displayedColumns.length"
-        [ngClass]="element.id === openedWorkflowId? '' : 'hidden'"
+        [ngClass]="element.id === openedWorkflowId ? '' : 'hidden'"
       >
         <div
           class="overflow-hidden flex justify-center"
@@ -71,54 +71,60 @@ <h2>{{ 'common.workflow.few' | translate }}</h2>
             element.id === openedWorkflowId ? 'expanded' : 'collapsed'
           "
         >
-          <table
-            class="my-4 mx-0"
-            cdk-table
-            uiTableWrapper
-            [dataSource]="filteredSteps"
-            *ngIf="filteredSteps.length"
-          >
-            <ng-container cdkColumnDef="name">
-              <th uiCellHeader *cdkHeaderCellDef scope="col">
-                {{ 'common.step.one' | translate }}
-              </th>
-              <td
-                uiCell
-                *cdkCellDef="let element"
-                class="!text-gray-900 !font-medium"
-              >
-                {{ element.name }}
-              </td>
-            </ng-container>
-            <ng-container cdkColumnDef="actions" [stickyEnd]="true">
-              <th uiCellHeader *cdkHeaderCellDef scope="col" class="w-16"></th>
-              <td uiCell *cdkCellDef="let element">
-                <ui-button
-                  [isIcon]="true"
-                  [icon]="
-                    accessibleSteps.includes(element.id)
-                      ? 'visibility'
-                      : 'visibility_off'
-                  "
-                  [variant]="
-                    accessibleSteps.includes(element.id) ? 'primary' : 'grey'
-                  "
-                  (click)="onEditStepAccess(element)"
-                  [disabled]="loading"
-                  [uiTooltip]="
-                    (accessiblePages.includes(element.id)
-                      ? 'components.role.tooltip.hideFeature'
-                      : 'components.role.tooltip.showFeature'
-                    ) | translate : { page: element.name }
-                  "
+          <div class="m-4 w-full overflow-x-auto shadow border pt-2 sm:rounded-lg bg-gray-50">
+            <table
+              class="mx-0 min-w-full divide-y divide-gray-300"
+              cdk-table
+              [dataSource]="filteredSteps"
+              *ngIf="filteredSteps.length"
+            >
+              <ng-container cdkColumnDef="name">
+                <th uiCellHeader *cdkHeaderCellDef scope="col">
+                  {{ 'common.step.one' | translate }}
+                </th>
+                <td
+                  uiCell
+                  *cdkCellDef="let element"
+                  class="!text-gray-900 !font-medium"
                 >
-                </ui-button>
-              </td>
-            </ng-container>
+                  {{ element.name }}
+                </td>
+              </ng-container>
+              <ng-container cdkColumnDef="actions" [stickyEnd]="true">
+                <th
+                  uiCellHeader
+                  *cdkHeaderCellDef
+                  scope="col"
+                  class="w-16"
+                ></th>
+                <td uiCell *cdkCellDef="let element">
+                  <ui-button
+                    [isIcon]="true"
+                    [icon]="
+                      accessibleSteps.includes(element.id)
+                        ? 'visibility'
+                        : 'visibility_off'
+                    "
+                    [variant]="
+                      accessibleSteps.includes(element.id) ? 'primary' : 'grey'
+                    "
+                    (click)="onEditStepAccess(element)"
+                    [disabled]="loading"
+                    [uiTooltip]="
+                      (accessiblePages.includes(element.id)
+                        ? 'components.role.tooltip.hideFeature'
+                        : 'components.role.tooltip.showFeature'
+                      ) | translate : { page: element.name }
+                    "
+                  >
+                  </ui-button>
+                </td>
+              </ng-container>
 
-            <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
-            <tr *cdkRowDef="let row; columns: displayedColumns" cdk-row></tr>
-          </table>
+              <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+              <tr class ="border-gray-200 border-y" *cdkRowDef="let row; columns: displayedColumns" cdk-row></tr>
+            </table>
+          </div>
           <shared-empty
             *ngIf="filteredSteps.length === 0"
             [title]="'components.role.summary.noSteps' | translate"

From 81e8f9a78ef76b8000b075acc2aadadfac6e6519 Mon Sep 17 00:00:00 2001
From: Antoine Hurard <antoine.reliefapps@gmail.com>
Date: Thu, 19 Oct 2023 09:37:54 +0200
Subject: [PATCH 3/3] fix incorrect display of empty element when no steps
 available in role feature access editor

---
 .../role-workflows.component.html             | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html b/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
index 7216b82c96..2f9aa77f17 100644
--- a/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
+++ b/libs/shared/src/lib/components/role-summary/role-features/role-workflows/role-workflows.component.html
@@ -71,7 +71,11 @@ <h2>{{ 'common.workflow.few' | translate }}</h2>
             element.id === openedWorkflowId ? 'expanded' : 'collapsed'
           "
         >
-          <div class="m-4 w-full overflow-x-auto shadow border pt-2 sm:rounded-lg bg-gray-50">
+          <!-- Table of steps -->
+          <div
+            *ngIf="filteredSteps.length; else emptyTemplate"
+            class="m-4 w-full overflow-x-auto shadow border pt-2 sm:rounded-lg bg-gray-50"
+          >
             <table
               class="mx-0 min-w-full divide-y divide-gray-300"
               cdk-table
@@ -122,14 +126,21 @@ <h2>{{ 'common.workflow.few' | translate }}</h2>
               </ng-container>
 
               <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
-              <tr class ="border-gray-200 border-y" *cdkRowDef="let row; columns: displayedColumns" cdk-row></tr>
+              <tr
+                class="border-gray-200 border-y"
+                *cdkRowDef="let row; columns: displayedColumns"
+                cdk-row
+              ></tr>
             </table>
           </div>
-          <shared-empty
-            *ngIf="filteredSteps.length === 0"
-            [title]="'components.role.summary.noSteps' | translate"
-          >
-          </shared-empty>
+          <!-- When no steps are available -->
+          <ng-template #emptyTemplate>
+            <shared-empty
+              class="py-3"
+              [title]="'components.role.summary.noSteps' | translate"
+            >
+            </shared-empty>
+          </ng-template>
         </div>
       </td>
     </ng-container>