Refactor Actions column to use menu-based pattern following backend-configuration-plugin reference

eform-client/e2e/Page objects/Workflow/WorkflowCases.page.ts

@@ -195,6 +195,7 @@ export class WorkflowCaseRowObject {
   public actionPlan: string;
   public toBeSolvedBy: string;
   public status: string;
+  public menuBtn: WebdriverIO.Element;
   public updateBtn: WebdriverIO.Element;
   public deleteBtn: WebdriverIO.Element;
 
@@ -245,14 +246,18 @@ export class WorkflowCaseRowObject {
       this.actionPlan = await (await $$('tbody > tr > td.mat-column-actionPlan'))[rowNum].getText();
       this.toBeSolvedBy = await (await $$('tbody > tr > td.mat-column-solvedBy'))[rowNum].getText();
       this.status = await (await $$('tbody > tr > td.mat-column-status'))[rowNum].getText();
-      this.updateBtn = (await $$('#editWorkflowCaseBtn'))[rowNum];
-      this.deleteBtn = await $$('#deleteBtn')[rowNum];
+      this.menuBtn = await $(`#actionMenu-${rowNum}`);
+      this.updateBtn = await $(`#editWorkflowCaseBtn-${rowNum}`);
+      this.deleteBtn = await $(`#deleteBtn-${rowNum}`);
     }
     return this;
   }
 
 
   public async openDelete() {
+    await this.menuBtn.waitForClickable({ timeout: 20000 });
+    await this.menuBtn.click();
+    await browser.pause(500);
     await this.deleteBtn.waitForClickable({ timeout: 20000 });
     await this.deleteBtn.click();
     await (await workflowCasesPage.workflowCaseDeleteCancelBtn()).waitForDisplayed({
@@ -261,6 +266,10 @@ export class WorkflowCaseRowObject {
   }
 
   public async openEdit(updateModel: WorkflowCaseForEdit) {
+    await this.menuBtn.waitForClickable({ timeout: 20000 });
+    await this.menuBtn.click();
+    await browser.pause(500);
+    await this.updateBtn.waitForClickable({ timeout: 20000 });
     await this.updateBtn.click();
     await (await workflowCasesPage.cancelEditBtn()).waitForDisplayed({
       timeout: 20000,

eform-client/src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-cases-page/workflow-cases-page.component.html

@@ -44,41 +44,47 @@
   [noResultText]="'No workflow cases found' | translate">
 </mtx-grid>
 
-<ng-template #actionsTpl let-row>
-  <div class="d-flex">
-    <button
-      mat-icon-button
-      id="editWorkflowCaseBtn"
-      matTooltip="{{ 'Edit Workflow Case' | translate }}"
-      [routerLink]="['/plugins/workflow-pn/edit-workflow-case/', row.id]"
-    >
-      <mat-icon>edit</mat-icon>
-    </button>
-    <button
-      mat-icon-button
-      matTooltip="{{ 'Download PDF' | translate }}"
-      (click)="downloadFile(row.id, 'pdf')"
-      color="accent"
-    >
-      <mat-icon svgIcon="file-pdf"></mat-icon>
-    </button>
-    <button
-      mat-icon-button
-      color="primary"
-      (click)="downloadFile(row.id, 'docx')"
-      matTooltip="{{ 'Download Docx' | translate }}"
-    >
-      <mat-icon svgIcon="file-word"></mat-icon>
-    </button>
-    <button
-      mat-icon-button
-      color="warn"
-      id="deleteBtn"
-      (click)="showDeleteWorkflowCaseModal(row)"
-      matTooltip="{{ 'Delete' | translate }}"
-    >
-      <mat-icon>delete</mat-icon>
+<ng-template #actionsTpl let-row let-i="index">
+  <div class="workflow-case-actions" id="action-items-{{i}}">
+    <button id="actionMenu-{{i}}" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="{{ 'Actions' | translate }}">
+      <mat-icon>more_vert</mat-icon>
     </button>
+
+    <mat-menu #menu="matMenu">
+      <button
+        mat-menu-item
+        id="editWorkflowCaseBtn-{{i}}"
+        [routerLink]="['/plugins/workflow-pn/edit-workflow-case/', row.id]"
+      >
+        <mat-icon>edit</mat-icon>
+        <span>{{ 'Edit Workflow Case' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="downloadPdfBtn-{{i}}"
+        (click)="downloadFile(row.id, 'pdf')"
+      >
+        <mat-icon svgIcon="file-pdf"></mat-icon>
+        <span>{{ 'Download PDF' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        id="downloadDocxBtn-{{i}}"
+        (click)="downloadFile(row.id, 'docx')"
+      >
+        <mat-icon svgIcon="file-word"></mat-icon>
+        <span>{{ 'Download Docx' | translate }}</span>
+      </button>
+      <button
+        mat-menu-item
+        color="warn"
+        id="deleteBtn-{{i}}"
+        (click)="showDeleteWorkflowCaseModal(row)"
+      >
+        <mat-icon color="warn">delete</mat-icon>
+        <span>{{ 'Delete' | translate }}</span>
+      </button>
+    </mat-menu>
   </div>
 </ng-template>
 

eform-client/src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-cases-page/workflow-cases-page.component.ts

@@ -82,7 +82,10 @@ export class WorkflowCasesPageComponent implements OnInit, OnDestroy {
     },
     {
       pinned: 'right',
-      header: this.translateService.stream('Actions'), field: 'actions'},
+      header: this.translateService.stream('Actions'),
+      field: 'actions',
+      width: '160px',
+    },
   ];
   workflowCaseDeletedSub$: Subscription;
   deleteWorkflowCase$: Subscription;