Fix: workflow edit form loses unsaved changes in v2.3.1 (#5299)

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

@@ -66,7 +66,7 @@ const workflow: Workflow = {
   ],
 }
 
-describe('ConsumptionTemplateEditDialogComponent', () => {
+describe('WorkflowEditDialogComponent', () => {
   let component: WorkflowEditDialogComponent
   let settingsService: SettingsService
   let fixture: ComponentFixture<WorkflowEditDialogComponent>
@@ -219,6 +219,7 @@ describe('ConsumptionTemplateEditDialogComponent', () => {
     const action1 = workflow.actions[0]
     const action2 = workflow.actions[1]
     component.object = workflow
+    component.ngOnInit()
     component.onActionDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop<
       WorkflowAction[]
     >)

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

@@ -19,6 +19,7 @@ import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service
 import { CustomField } from 'src/app/data/custom-field'
 import {
   DocumentSource,
+  WorkflowTrigger,
   WorkflowTriggerType,
 } from 'src/app/data/workflow-trigger'
 import {
@@ -157,7 +158,7 @@ export class WorkflowEditDialogComponent
 
   ngOnInit(): void {
     super.ngOnInit()
-    this.updateTriggerActionFields()
+    this.updateAllTriggerActionFields()
   }
 
   get triggerFields(): FormArray {
@@ -168,9 +169,10 @@ export class WorkflowEditDialogComponent
     return this.objectForm.get('actions') as FormArray
   }
 
-  private updateTriggerActionFields(emitEvent: boolean = false) {
-    this.triggerFields.clear({ emitEvent: false })
-    this.object?.triggers.forEach((trigger) => {
+  private createTriggerField(
+    trigger: WorkflowTrigger,
+    emitEvent: boolean = false
+  ) {
     this.triggerFields.push(
       new FormGroup({
         id: new FormControl(trigger.id),
@@ -192,10 +194,12 @@ export class WorkflowEditDialogComponent
       }),
       { emitEvent }
     )
-    })
+  }
 
-    this.actionFields.clear({ emitEvent: false })
-    this.object?.actions.forEach((action) => {
+  private createActionField(
+    action: WorkflowAction,
+    emitEvent: boolean = false
+  ) {
     this.actionFields.push(
       new FormGroup({
         id: new FormControl(action.id),
@@ -214,6 +218,17 @@ export class WorkflowEditDialogComponent
       }),
       { emitEvent }
     )
+  }
+
+  private updateAllTriggerActionFields(emitEvent: boolean = false) {
+    this.triggerFields.clear({ emitEvent: false })
+    this.object?.triggers.forEach((trigger) => {
+      this.createTriggerField(trigger, emitEvent)
+    })
+
+    this.actionFields.clear({ emitEvent: false })
+    this.object?.actions.forEach((action) => {
+      this.createActionField(action, emitEvent)
     })
   }
 
@@ -233,7 +248,7 @@ export class WorkflowEditDialogComponent
     if (!this.object) {
       this.object = Object.assign({}, this.objectForm.value)
     }
-    this.object.triggers.push({
+    const trigger: WorkflowTrigger = {
       type: WorkflowTriggerType.Consumption,
       sources: [],
       filter_filename: null,
@@ -245,9 +260,9 @@ export class WorkflowEditDialogComponent
       matching_algorithm: MATCH_NONE,
       match: null,
       is_insensitive: true,
-    })
-
-    this.updateTriggerActionFields()
+    }
+    this.object.triggers.push(trigger)
+    this.createTriggerField(trigger)
   }
 
   get actionTypeOptions() {
@@ -262,7 +277,7 @@ export class WorkflowEditDialogComponent
     if (!this.object) {
       this.object = Object.assign({}, this.objectForm.value)
     }
-    this.object.actions.push({
+    const action: WorkflowAction = {
       type: WorkflowActionType.Assignment,
       assign_title: null,
       assign_tags: [],
@@ -275,19 +290,19 @@ export class WorkflowEditDialogComponent
       assign_change_users: [],
       assign_change_groups: [],
       assign_custom_fields: [],
-    })
-
-    this.updateTriggerActionFields()
+    }
+    this.object.actions.push(action)
+    this.createActionField(action)
   }
 
   removeTrigger(index: number) {
-    this.object.triggers.splice(index, 1)
-    this.updateTriggerActionFields()
+    this.object.triggers.splice(index, 1).pop()
+    this.triggerFields.removeAt(index)
   }
 
   removeAction(index: number) {
     this.object.actions.splice(index, 1)
-    this.updateTriggerActionFields()
+    this.actionFields.removeAt(index)
   }
 
   onActionDrop(event: CdkDragDrop<WorkflowAction[]>) {
@@ -296,8 +311,10 @@ export class WorkflowEditDialogComponent
       event.previousIndex,
       event.currentIndex
     )
+    const actionField = this.actionFields.at(event.previousIndex)
+    this.actionFields.removeAt(event.previousIndex)
+    this.actionFields.insert(event.currentIndex, actionField)
     // removing id will effectively re-create the actions in this order
     this.object.actions.forEach((a) => (a.id = null))
-    this.updateTriggerActionFields()
   }
 }