[ACS-8959] Introduce new takeUntilDestroyed operator where possible (…

…#10388)
Alfresco · Nov 19, 2024 · 3078387 · 3078387
1 parent 3f6b607
commit 3078387
Show file tree

Hide file tree

Showing 128 changed files with 1,436 additions and 1,530 deletions.
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts
@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { NodesApiService } from '../common/services/nodes-api.service';
-import { Observable, Subject, zip } from 'rxjs';
-import { concatMap, map, takeUntil, tap } from 'rxjs/operators';
+import { Observable, zip } from 'rxjs';
+import { concatMap, map, tap } from 'rxjs/operators';
 import { AspectListService } from './services/aspect-list.service';
 import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
 import { AspectEntry } from '@alfresco/js-api';
@@ -27,6 +27,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatTableModule } from '@angular/material/table';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-aspect-list',
@@ -36,7 +37,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     styleUrls: ['./aspect-list.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class AspectListComponent implements OnInit, OnDestroy {
+export class AspectListComponent implements OnInit {
     /** Node Id of the node that we want to update */
     @Input()
     nodeId: string = '';
@@ -60,15 +61,10 @@ export class AspectListComponent implements OnInit, OnDestroy {
     notDisplayedAspects: string[] = [];
     hasEqualAspect: boolean = true;
 
-    private onDestroy$ = new Subject<boolean>();
+    private readonly destroyRef = inject(DestroyRef);
 
     constructor(private aspectListService: AspectListService, private nodeApiService: NodesApiService) {}
 
-    ngOnDestroy(): void {
-        this.onDestroy$.next(true);
-        this.onDestroy$.complete();
-    }
-
     ngOnInit(): void {
         let aspects$: Observable<AspectEntry[]>;
         if (this.nodeId) {
@@ -89,10 +85,10 @@ export class AspectListComponent implements OnInit, OnDestroy {
                     this.updateCounter.emit(this.nodeAspects.length);
                 }),
                 concatMap(() => this.aspectListService.getAspects()),
-                takeUntil(this.onDestroy$)
+                takeUntilDestroyed(this.destroyRef)
             );
         } else {
-            aspects$ = this.aspectListService.getAspects().pipe(takeUntil(this.onDestroy$));
+            aspects$ = this.aspectListService.getAspects().pipe(takeUntilDestroyed(this.destroyRef));
         }
         this.aspects$ = aspects$.pipe(map((aspects) => aspects.filter((aspect) => !this.excludedAspects.includes(aspect.entry.id))));
     }

diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts
@@ -15,15 +15,25 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, ViewEncapsulation, OnDestroy } from '@angular/core';
+import {
+    Component,
+    DestroyRef,
+    EventEmitter,
+    inject,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { Node, PathElement } from '@alfresco/js-api';
 import { DocumentListComponent } from '../document-list/components/document-list.component';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'adf-breadcrumb',
@@ -34,7 +44,7 @@ import { TranslateModule } from '@ngx-translate/core';
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-breadcrumb' }
 })
-export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
+export class BreadcrumbComponent implements OnInit, OnChanges {
     /** Active node, builds UI based on folderNode.path.elements collection. */
     @Input()
     folderNode: Node = null;
@@ -86,7 +96,7 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
 
     route: PathElement[] = [];
 
-    private onDestroy$ = new Subject<boolean>();
+    private readonly destroyRef = inject(DestroyRef);
 
     get hasRoot(): boolean {
         return !!this.root;
@@ -104,7 +114,7 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
         this.transform = this.transform ? this.transform : null;
 
         if (this.target) {
-            this.target.$folderNode.pipe(takeUntil(this.onDestroy$)).subscribe((folderNode: Node) => {
+            this.target.$folderNode.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((folderNode: Node) => {
                 this.folderNode = folderNode;
                 this.recalculateNodes();
             });
@@ -201,9 +211,4 @@ export class BreadcrumbComponent implements OnInit, OnChanges, OnDestroy {
             }
         }
     }
-
-    ngOnDestroy() {
-        this.onDestroy$.next(true);
-        this.onDestroy$.complete();
-    }
 }
diff --git a/...ontent-services/src/lib/category/categories-management/categories-management.component.ts b/...ontent-services/src/lib/category/categories-management/categories-management.component.ts
@@ -16,10 +16,22 @@
  */
 
 import { Category } from '@alfresco/js-api';
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    DestroyRef,
+    ElementRef,
+    EventEmitter,
+    inject,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { EMPTY, Observable, Subject, timer } from 'rxjs';
-import { debounce, first, map, takeUntil, tap } from 'rxjs/operators';
+import { debounce, first, map, tap } from 'rxjs/operators';
 import { CategoriesManagementMode } from './categories-management-mode';
 import { CategoryService } from '../services/category.service';
 import { CommonModule } from '@angular/common';
@@ -30,6 +42,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 interface CategoryNameControlErrors {
     duplicatedExistingCategory?: boolean;
@@ -66,7 +79,6 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
 
     private existingCategoryLoaded$ = new Subject<void>();
     private cancelExistingCategoriesLoading$ = new Subject<void>();
-    private onDestroy$ = new Subject<void>();
     private _categoryNameControl = new FormControl<string>(
         '',
         [this.validateIfNotAlreadyAdded.bind(this), this.validateEmptyCategory, Validators.required],
@@ -147,6 +159,8 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     @ViewChild('categoryNameInput')
     private categoryNameInputElement: ElementRef;
 
+    private readonly destroyRef = inject(DestroyRef);
+
     constructor(private categoryService: CategoryService) {}
 
     ngOnInit() {
@@ -162,11 +176,11 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
                     this.cancelExistingCategoriesLoading$.next();
                 }),
                 debounce((name: string) => (name ? timer(300) : EMPTY)),
-                takeUntil(this.onDestroy$)
+                takeUntilDestroyed(this.destroyRef)
             )
             .subscribe((name: string) => this.onNameControlValueChange(name));
 
-        this.categoryNameControl.statusChanges.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.setCategoryNameControlErrorMessageKey());
+        this.categoryNameControl.statusChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.setCategoryNameControlErrorMessageKey());
 
         this.setCategoryNameControlErrorMessageKey();
 
@@ -178,7 +192,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
             this._categoryNameControl.removeValidators(Validators.required);
             this.categories.forEach((category) => this.initialCategories.push(category));
             if (this.classifiableChanged) {
-                this.classifiableChanged.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+                this.classifiableChanged.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
                     this.categories = [];
                     this.categoryNameControlVisible = false;
                     this.categoryNameControlVisibleChange.emit(false);
@@ -188,8 +202,6 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy() {
-        this.onDestroy$.next();
-        this.onDestroy$.complete();
         this.cancelExistingCategoriesLoading$.next();
         this.cancelExistingCategoriesLoading$.complete();
     }

diff --git a/...rvices/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/...rvices/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, inject, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { Category, CategoryEntry, CategoryLinkBody, CategoryPaging, Node, TagBody, TagEntry, TagPaging } from '@alfresco/js-api';
 import { forkJoin, Observable, of, Subject, zip } from 'rxjs';
 import {
@@ -28,8 +28,8 @@ import {
     UpdateNotification
 } from '@alfresco/adf-core';
 import { ContentMetadataService } from '../../services/content-metadata.service';
-import { CardViewGroup, PresetConfig, ContentMetadataCustomPanel, ContentMetadataPanel } from '../../interfaces/content-metadata.interfaces';
-import { catchError, debounceTime, map, takeUntil } from 'rxjs/operators';
+import { CardViewGroup, ContentMetadataCustomPanel, ContentMetadataPanel, PresetConfig } from '../../interfaces/content-metadata.interfaces';
+import { catchError, debounceTime, map } from 'rxjs/operators';
 import { CardViewContentUpdateService } from '../../../common/services/card-view-content-update.service';
 import { NodesApiService } from '../../../common/services/nodes-api.service';
 import { TagsCreatorMode } from '../../../tag/tags-creator/tags-creator-mode';
@@ -49,6 +49,7 @@ import { CategoriesManagementComponent } from '../../../category';
 import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { TagsCreatorComponent } from '../../../tag';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const DEFAULT_SEPARATOR = ', ';
 
@@ -80,9 +81,7 @@ enum DefaultPanels {
     host: { class: 'adf-content-metadata' },
     encapsulation: ViewEncapsulation.None
 })
-export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
-    protected onDestroy$ = new Subject<boolean>();
-
+export class ContentMetadataComponent implements OnChanges, OnInit {
     /** (required) The node entity to fetch metadata about */
     @Input()
     node: Node;
@@ -167,6 +166,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         panelTitle: ''
     };
 
+    private readonly destroyRef = inject(DestroyRef);
+
     constructor(
         private contentMetadataService: ContentMetadataService,
         private cardViewContentUpdateService: CardViewContentUpdateService,
@@ -185,14 +186,14 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
 
     ngOnInit() {
         this.cardViewContentUpdateService.itemUpdated$
-            .pipe(debounceTime(500), takeUntil(this.onDestroy$))
+            .pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef))
             .subscribe((updatedNode: UpdateNotification) => {
                 this.hasMetadataChanged = true;
                 this.targetProperty = updatedNode.target;
                 this.updateChanges(updatedNode.changed);
             });
 
-        this.cardViewContentUpdateService.updatedAspect$.pipe(debounceTime(500), takeUntil(this.onDestroy$)).subscribe((node) => {
+        this.cardViewContentUpdateService.updatedAspect$.pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef)).subscribe((node) => {
             this.node.aspectNames = node?.aspectNames;
             this.loadProperties(node);
         });
@@ -274,11 +275,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         }
     }
 
-    ngOnDestroy() {
-        this.onDestroy$.next(true);
-        this.onDestroy$.complete();
-    }
-
     updateChanges(updatedNodeChanges) {
         Object.keys(updatedNodeChanges).map((propertyGroup: string) => {
             if (typeof updatedNodeChanges[propertyGroup] === 'object') {

diff --git a/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts b/lib/content-services/src/lib/content-metadata/services/property-groups-translator.service.ts
@@ -15,27 +15,27 @@
  * limitations under the License.
  */
 
-import { inject, Injectable } from '@angular/core';
+import { inject, Injectable, Injector, runInInjectionContext } from '@angular/core';
 import {
-    CardViewItemProperties,
-    CardViewItem,
-    CardViewTextItemModel,
+    AppConfigService,
     CardViewBoolItemModel,
     CardViewDateItemModel,
-    CardViewSelectItemModel,
     CardViewDatetimeItemModel,
+    CardViewFloatItemModel,
     CardViewIntItemModel,
+    CardViewItem,
+    CardViewItemProperties,
     CardViewLongItemModel,
-    CardViewFloatItemModel,
-    MultiValuePipe,
-    AppConfigService,
+    CardViewSelectItemModel,
+    CardViewTextItemModel,
     DecimalNumberPipe,
     LogService,
+    MultiValuePipe,
     UserPreferencesService
 } from '@alfresco/adf-core';
-import { Property, CardViewGroup, OrganisedPropertyGroup } from '../interfaces/content-metadata.interfaces';
+import { CardViewGroup, OrganisedPropertyGroup, Property } from '../interfaces/content-metadata.interfaces';
 import { of } from 'rxjs';
-import { Definition, Constraint, Property as PropertyBase } from '@alfresco/js-api';
+import { Constraint, Definition, Property as PropertyBase } from '@alfresco/js-api';
 
 const D_TEXT = 'd:text';
 const D_MLTEXT = 'd:mltext';
@@ -59,6 +59,8 @@ export class PropertyGroupTranslatorService {
 
     valueSeparator: string;
 
+    private readonly injector = inject(Injector);
+
     constructor() {
         this.valueSeparator = this.appConfig.get<string>('content-metadata.multi-value-pipe-separator');
     }
@@ -156,10 +158,7 @@ export class PropertyGroupTranslatorService {
                     cardViewItemProperty = new CardViewFloatItemModel(
                         Object.assign(propertyDefinition, {
                             multivalued: isMultiValued,
-                            pipes: [
-                                { pipe: new DecimalNumberPipe(this.userPreferenceService, this.appConfig) },
-                                { pipe: new MultiValuePipe(), params: [this.valueSeparator] }
-                            ]
+                            pipes: [{ pipe: this.getDecimalNumberPipe() }, { pipe: new MultiValuePipe(), params: [this.valueSeparator] }]
                         })
                     );
                     break;
@@ -218,4 +217,12 @@ export class PropertyGroupTranslatorService {
     private isEmpty(value: any): boolean {
         return value === undefined || value === null || value === '';
     }
+
+    private getDecimalNumberPipe(): DecimalNumberPipe {
+        let decimalNumberPipe: DecimalNumberPipe;
+        runInInjectionContext(this.injector, () => {
+            decimalNumberPipe = new DecimalNumberPipe(this.userPreferenceService, this.appConfig);
+        });
+        return decimalNumberPipe;
+    }
 }