Enhancement: workflow overview toggle enable button (#7818)

src-ui/src/app/components/manage/workflows/workflows.component.html

@@ -15,9 +15,9 @@
   <li class="list-group-item">
     <div class="row">
       <div class="col" i18n>Name</div>
-      <div class="col d-none d-sm-block" i18n>Sort order</div>
+      <div class="col d-none d-sm-flex" i18n>Sort order</div>
       <div class="col" i18n>Status</div>
-      <div class="col d-none d-sm-block" i18n>Triggers</div>
+      <div class="col d-none d-sm-flex" i18n>Triggers</div>
       <div class="col" i18n>Actions</div>
     </div>
   </li>
@@ -26,9 +26,16 @@
     <li class="list-group-item">
       <div class="row">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editWorkflow(workflow)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Workflow)">{{workflow.name}}</button></div>
-        <div class="col d-flex align-items-center d-none d-sm-block"><code>{{workflow.order}}</code></div>
-        <div class="col d-flex align-items-center"><code> @if(workflow.enabled) { <ng-container i18n>Enabled</ng-container> } @else { <span i18n class="text-muted">Disabled</span> }</code></div>
-        <div class="col d-flex align-items-center d-none d-sm-block">{{getTypesList(workflow)}}</div>
+        <div class="col d-flex align-items-center d-none d-sm-flex"><code>{{workflow.order}}</code></div>
+        <div class="col d-flex align-items-center">
+          <div class="form-check form-switch mb-0">
+            <input #inputField type="checkbox" class="form-check-input cursor-pointer" [id]="workflow.id+'_enable'" [(ngModel)]="workflow.enabled" (change)="onWorkflowEnableToggled(workflow)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }">
+            <label class="form-check-label cursor-pointer" [for]="workflow.id+'_enable'">
+              <code> @if(workflow.enabled) { <ng-container i18n>Enabled</ng-container> } @else { <span i18n class="text-muted">Disabled</span> }</code>
+            </label>
+          </div>
+        </div>
+        <div class="col d-flex align-items-center d-none d-sm-flex">{{getTypesList(workflow)}}</div>
         <div class="col">
 
           <div class="btn-group d-block d-sm-none">

src-ui/src/app/components/manage/workflows/workflows.component.spec.ts

@@ -211,4 +211,27 @@ describe('WorkflowsComponent', () => {
     editDialog.confirmClicked.emit()
     expect(reloadSpy).toHaveBeenCalled()
   })
+
+  it('should update workflow when enable is toggled', () => {
+    const patchSpy = jest.spyOn(workflowService, 'patch')
+    const toggleInput = fixture.debugElement.query(
+      By.css('input[type="checkbox"]')
+    )
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    // fail first
+    patchSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error getting config'))
+    )
+    toggleInput.nativeElement.click()
+    expect(patchSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    // succeed second
+    patchSpy.mockReturnValueOnce(of(workflows[0]))
+    toggleInput.nativeElement.click()
+    patchSpy.mockReturnValueOnce(of({ ...workflows[0], enabled: false }))
+    toggleInput.nativeElement.click()
+    expect(patchSpy).toHaveBeenCalled()
+    expect(toastInfoSpy).toHaveBeenCalled()
+  })
 })

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -130,4 +130,21 @@ export class WorkflowsComponent
       })
     })
   }
+
+  onWorkflowEnableToggled(workflow: Workflow) {
+    this.workflowService.patch(workflow).subscribe({
+      next: () => {
+        this.toastService.showInfo(
+          workflow.enabled
+            ? $localize`Enabled workflow`
+            : $localize`Disabled workflow`
+        )
+        this.workflowService.clearCache()
+        this.reload()
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error toggling workflow.`, e)
+      },
+    })
+  }
 }