[ACS-8959] Introduce new takeUntilDestroyed operator (#4237)

projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, forwardRef, inject, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ActionDefinitionTransformed, RuleAction } from '../../model/rule-action.model';
 import {
@@ -37,23 +37,24 @@ import {
 } from '@alfresco/adf-core';
 import { ActionParameterDefinition, Category, Node, SecurityMark } from '@alfresco/js-api';
 import { from, of, Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { ActionParameterConstraint, ConstraintValue } from '../../model/action-parameter-constraint.model';
 import {
+  CategorySelectorDialogComponent,
+  CategorySelectorDialogOptions,
   CategoryService,
   ContentNodeSelectorComponent,
   ContentNodeSelectorComponentData,
   NodeAction,
-  TagService,
-  CategorySelectorDialogComponent,
-  CategorySelectorDialogOptions,
-  SecurityControlsService
+  SecurityControlsService,
+  TagService
 } from '@alfresco/adf-content-services';
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   standalone: true,
@@ -72,7 +73,7 @@ import { MatSelectModule } from '@angular/material/select';
     CardViewUpdateService
   ]
 })
-export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
+export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnChanges {
   @Input()
   nodeId = '';
 
@@ -107,7 +108,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
 
   cardViewItems: CardViewItem[] = [];
   parameters: { [key: string]: unknown } = {};
-  private onDestroy$ = new Subject<void>();
 
   get selectedActionDefinitionId(): string {
     return this.form.get('actionDefinitionId').value;
@@ -120,6 +120,8 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
   onChange: (action: RuleAction) => void = () => undefined;
   onTouch: () => void = () => undefined;
 
+  private readonly destroyRef = inject(DestroyRef);
+
   constructor(
     private cardViewUpdateService: CardViewUpdateService,
     private dialog: MatDialog,
@@ -156,7 +158,7 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
       firstActionDefinition.title.localeCompare(secondActionDefinition.title)
     );
 
-    this.form.valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+    this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       this.setDefaultParameters();
       this.setCardViewProperties();
       this.onChange({
@@ -166,7 +168,7 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
       this.onTouch();
     });
 
-    this.cardViewUpdateService.itemUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe((updateNotification: UpdateNotification) => {
+    this.cardViewUpdateService.itemUpdated$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((updateNotification: UpdateNotification) => {
       const isSecurityGroupUpdated = updateNotification.target.key === 'securityGroupId';
       if (isSecurityGroupUpdated) {
         this.parameters.securityMarkId = null;
@@ -202,11 +204,6 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
     }
   }
 
-  ngOnDestroy() {
-    this.onDestroy$.next();
-    this.onDestroy$.complete();
-  }
-
   setCardViewProperties(securityMarkOptions?: CardViewSelectItemOption<string>[]) {
     const disabledTags = !this.tagService.areTagsEnabled();
     const disabledCategories = !this.categoryService.areCategoriesEnabled();
@@ -338,7 +335,7 @@ export class RuleActionUiComponent implements ControlValueAccessor, OnInit, OnCh
       width: '630px'
     });
 
-    data.select.pipe(takeUntil(this.onDestroy$)).subscribe((selections: Category[]) => {
+    data.select.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((selections: Category[]) => {
       if (selections[0].id) {
         this.writeValue({
           actionDefinitionId: this.selectedActionDefinitionId,

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, forwardRef, inject, Input, OnDestroy, OnInit, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, DestroyRef, forwardRef, inject, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { RuleSimpleCondition } from '../../model/rule-simple-condition.model';
 import { comparatorHiddenForConditionFieldType, RuleConditionField, ruleConditionFields } from './rule-condition-fields';
@@ -34,12 +34,13 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { CategoryService, TagService } from '@alfresco/adf-content-services';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { debounceTime, distinctUntilChanged, first, takeUntil } from 'rxjs/operators';
-import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, first } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 import { MatOptionModule } from '@angular/material/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CategoryEntry } from '@alfresco/js-api';
 import { AlfrescoMimeType, AppSettingsService } from '@alfresco/aca-shared';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 interface AutoCompleteOption {
   displayLabel: string;
@@ -75,7 +76,7 @@ const AUTOCOMPLETE_OPTIONS_DEBOUNCE_TIME = 500;
     }
   ]
 })
-export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnChanges, OnDestroy {
+export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAccessor, OnChanges {
   private appSettings = inject(AppSettingsService);
   private categoryService = inject(CategoryService);
   private tagService = inject(TagService);
@@ -92,9 +93,9 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
 
   @Input() readOnly = false;
 
-  private onDestroy$ = new Subject<void>();
   private autoCompleteOptionsSubscription: Subscription;
 
+  private readonly destroyRef = inject(DestroyRef);
   private readonly disabledTags = !this.tagService.areTagsEnabled();
   private readonly disabledCategories = !this.categoryService.areCategoriesEnabled();
 
@@ -175,25 +176,20 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
     }
   }
 
-  ngOnDestroy() {
-    this.onDestroy$.next();
-    this.onDestroy$.complete();
-  }
-
   ngOnInit() {
-    this.form.valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe((value: RuleSimpleCondition) => {
+    this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value: RuleSimpleCondition) => {
       this.onChange(value);
       this.onTouch();
     });
 
     this.form
       .get('field')
-      .valueChanges.pipe(distinctUntilChanged(), takeUntil(this.onDestroy$))
+      .valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
       .subscribe((field: string) => {
         if (field === 'category') {
           this.autoCompleteOptionsSubscription = this.form
             .get('parameter')
-            .valueChanges.pipe(distinctUntilChanged(), debounceTime(AUTOCOMPLETE_OPTIONS_DEBOUNCE_TIME), takeUntil(this.onDestroy$))
+            .valueChanges.pipe(distinctUntilChanged(), debounceTime(AUTOCOMPLETE_OPTIONS_DEBOUNCE_TIME), takeUntilDestroyed(this.destroyRef))
             .subscribe((categoryName) => {
               this.getCategories(categoryName);
             });

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.ts

@@ -22,10 +22,9 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { UntypedFormGroup, UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
+import { Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { distinctUntilChanged, map } from 'rxjs/operators';
 import { Rule, RuleForForm } from '../model/rule.model';
 import { ruleCompositeConditionValidator } from './validators/rule-composite-condition.validator';
 import { FolderRulesService } from '../services/folder-rules.service';
@@ -41,6 +40,7 @@ import { RuleCompositeConditionUiComponent } from './conditions/rule-composite-c
 import { RuleActionListUiComponent } from './actions/rule-action-list.ui-component';
 import { RuleOptionsUiComponent } from './options/rule-options.ui-component';
 import { CategoryService } from '@alfresco/adf-content-services';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   standalone: true,
@@ -61,7 +61,7 @@ import { CategoryService } from '@alfresco/adf-content-services';
   encapsulation: ViewEncapsulation.None,
   host: { class: 'aca-rule-details' }
 })
-export class RuleDetailsUiComponent implements OnInit, OnDestroy {
+export class RuleDetailsUiComponent implements OnInit {
   @Input()
   readOnly: boolean;
 
@@ -115,7 +115,6 @@ export class RuleDetailsUiComponent implements OnInit, OnDestroy {
   @Output()
   formValueChanged = new EventEmitter<Partial<Rule>>();
 
-  private onDestroy$ = new Subject<void>();
   form: UntypedFormGroup;
 
   errorScriptConstraint: ActionParameterConstraint;
@@ -137,6 +136,8 @@ export class RuleDetailsUiComponent implements OnInit, OnDestroy {
     return !this.readOnly || this.value.isAsynchronous || this.value.isInheritable;
   }
 
+  private readonly destroyRef = inject(DestroyRef);
+
   constructor(private categoryService: CategoryService) {}
 
   ngOnInit() {
@@ -169,14 +170,14 @@ export class RuleDetailsUiComponent implements OnInit, OnDestroy {
       .pipe(
         map(() => this.form.valid),
         distinctUntilChanged(),
-        takeUntil(this.onDestroy$)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe((value: boolean) => {
         this.formValidationChanged.emit(value);
       });
     this.formValidationChanged.emit(this.form.valid);
 
-    this.form.valueChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+    this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       this.formValueChanged.emit(this.value);
     });
 
@@ -194,9 +195,4 @@ export class RuleDetailsUiComponent implements OnInit, OnDestroy {
       (parameterConstraint: ActionParameterConstraint) => parameterConstraint.name === 'script-ref'
     );
   }
-
-  ngOnDestroy() {
-    this.onDestroy$.next();
-    this.onDestroy$.complete();
-  }
 }