Fix: ensure custom field query propagation, change detection (#11291)

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.spec.ts

@@ -354,5 +354,13 @@ describe('CustomFieldsQueryDropdownComponent', () => {
       model.removeElement(atom)
       expect(completeSpy).toHaveBeenCalled()
     })
+
+    it('should subscribe to existing elements when queries are assigned', () => {
+      const expression = new CustomFieldQueryExpression()
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      model.queries = [expression]
+      expression.changed.next(expression)
+      expect(nextSpy).toHaveBeenCalledWith(model)
+    })
   })
 })

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { first, Subject, takeUntil } from 'rxjs'
+import { first, Subject, Subscription, takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
   CUSTOM_FIELD_QUERY_MAX_ATOMS,
@@ -41,10 +41,27 @@ import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.comp
 import { DocumentLinkComponent } from '../input/document-link/document-link.component'
 
 export class CustomFieldQueriesModel {
-  public queries: CustomFieldQueryElement[] = []
+  private _queries: CustomFieldQueryElement[] = []
+  private rootSubscriptions: Subscription[] = []
 
   public readonly changed = new Subject<CustomFieldQueriesModel>()
 
+  public get queries(): CustomFieldQueryElement[] {
+    return this._queries
+  }
+
+  public set queries(value: CustomFieldQueryElement[]) {
+    this.teardownRootSubscriptions()
+    this._queries = value ?? []
+    for (const element of this._queries) {
+      this.rootSubscriptions.push(
+        element.changed.subscribe(() => {
+          this.changed.next(this)
+        })
+      )
+    }
+  }
+
   public clear(fireEvent = true) {
     this.queries = []
     if (fireEvent) {
@@ -107,14 +124,14 @@ export class CustomFieldQueriesModel {
   public addExpression(
     expression: CustomFieldQueryExpression = new CustomFieldQueryExpression()
   ) {
-    if (this.queries.length > 0) {
-      ;(
-        (this.queries[0] as CustomFieldQueryExpression)
-          .value as CustomFieldQueryElement[]
-      ).push(expression)
-    } else {
-      this.queries.push(expression)
+    if (this.queries.length === 0) {
+      this.queries = [expression]
+      return
     }
+    ;(
+      (this.queries[0] as CustomFieldQueryExpression)
+        .value as CustomFieldQueryElement[]
+    ).push(expression)
     expression.changed.subscribe(() => {
       this.changed.next(this)
     })
@@ -166,6 +183,13 @@ export class CustomFieldQueriesModel {
       this.changed.next(this)
     }
   }
+
+  private teardownRootSubscriptions() {
+    for (const subscription of this.rootSubscriptions) {
+      subscription.unsubscribe()
+    }
+    this.rootSubscriptions = []
+  }
 }
 
 @Component({