Feature: email, webhook workflow actions (#8108)

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html

@@ -322,6 +322,33 @@
           </div>
         </div>
       }
+      @case (WorkflowActionType.Email) {
+        <div class="row" [formGroup]="formGroup.get('email')">
+          <input type="hidden" formControlName="id" />
+          <div class="col">
+            <pngx-input-text i18n-title title="Email subject" formControlName="subject" [error]="error?.actions?.[i]?.email?.subject"></pngx-input-text>
+            <pngx-input-textarea i18n-title title="Email body" formControlName="body" [error]="error?.actions?.[i]?.email?.body"></pngx-input-textarea>
+            <pngx-input-text i18n-title title="Email recipients" formControlName="to" [error]="error?.actions?.[i]?.email?.to"></pngx-input-text>
+            <pngx-input-switch i18n-title title="Attach document" formControlName="include_document"></pngx-input-switch>
+          </div>
+        </div>
+      }
+      @case (WorkflowActionType.Webhook) {
+        <div class="row" [formGroup]="formGroup.get('webhook')">
+          <input type="hidden" formControlName="id" />
+          <div class="col">
+            <pngx-input-text i18n-title title="Webhook url" formControlName="url" [error]="error?.actions?.[i]?.url"></pngx-input-text>
+            <pngx-input-switch i18n-title title="Use parameters for webhook body" formControlName="use_params"></pngx-input-switch>
+            @if (formGroup.get('webhook').value['use_params']) {
+              <pngx-input-entries i18n-title title="Webhook params" formControlName="params" [error]="error?.actions?.[i]?.params"></pngx-input-entries>
+            } @else {
+              <pngx-input-textarea i18n-title title="Webhook body" formControlName="body" [error]="error?.actions?.[i]?.body"></pngx-input-textarea>
+            }
+            <pngx-input-entries i18n-title title="Webhook headers" formControlName="headers" [error]="error?.actions?.[i]?.headers"></pngx-input-entries>
+            <pngx-input-switch i18n-title title="Include document" formControlName="include_document"></pngx-input-switch>
+          </div>
+        </div>
+      }
     }
   </div>
 </ng-template>

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts

@@ -347,4 +347,15 @@ describe('WorkflowEditDialogComponent', () => {
       component.actionFields.at(0).get('remove_change_groups').disabled
     ).toBeFalsy()
   })
+
+  it('should prune empty nested objects on save', () => {
+    component.object = workflow
+    component.addTrigger()
+    component.addAction()
+    expect(component.objectForm.get('actions').value[0].email).not.toBeNull()
+    expect(component.objectForm.get('actions').value[0].webhook).not.toBeNull()
+    component.save()
+    expect(component.objectForm.get('actions').value[0].email).toBeNull()
+    expect(component.objectForm.get('actions').value[0].webhook).toBeNull()
+  })
 })

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts

@@ -96,6 +96,14 @@ export const WORKFLOW_ACTION_OPTIONS = [
     id: WorkflowActionType.Removal,
     name: $localize`Removal`,
   },
+  {
+    id: WorkflowActionType.Email,
+    name: $localize`Email`,
+  },
+  {
+    id: WorkflowActionType.Webhook,
+    name: $localize`Webhook`,
+  },
 ]
 
 const TRIGGER_MATCHING_ALGORITHMS = MATCHING_ALGORITHMS.filter(
@@ -402,6 +410,22 @@ export class WorkflowEditDialogComponent
         remove_all_custom_fields: new FormControl(
           action.remove_all_custom_fields
         ),
+        email: new FormGroup({
+          id: new FormControl(action.email?.id),
+          subject: new FormControl(action.email?.subject),
+          body: new FormControl(action.email?.body),
+          to: new FormControl(action.email?.to),
+          include_document: new FormControl(!!action.email?.include_document),
+        }),
+        webhook: new FormGroup({
+          id: new FormControl(action.webhook?.id),
+          url: new FormControl(action.webhook?.url),
+          use_params: new FormControl(action.webhook?.use_params),
+          params: new FormControl(action.webhook?.params),
+          body: new FormControl(action.webhook?.body),
+          headers: new FormControl(action.webhook?.headers),
+          include_document: new FormControl(!!action.webhook?.include_document),
+        }),
       }),
       { emitEvent }
     )
@@ -503,6 +527,22 @@ export class WorkflowEditDialogComponent
       remove_all_permissions: false,
       remove_custom_fields: [],
       remove_all_custom_fields: false,
+      email: {
+        id: null,
+        subject: null,
+        body: null,
+        to: null,
+        include_document: false,
+      },
+      webhook: {
+        id: null,
+        url: null,
+        use_params: true,
+        params: null,
+        body: null,
+        headers: null,
+        include_document: false,
+      },
     }
     this.object.actions.push(action)
     this.createActionField(action)
@@ -533,4 +573,18 @@ export class WorkflowEditDialogComponent
       c.get('id').setValue(null, { emitEvent: false })
     )
   }
+
+  save(): void {
+    this.objectForm
+      .get('actions')
+      .value.forEach((action: WorkflowAction, i) => {
+        if (action.type !== WorkflowActionType.Webhook) {
+          action.webhook = null
+        }
+        if (action.type !== WorkflowActionType.Email) {
+          action.email = null
+        }
+      })
+    super.save()
+  }
 }