[ADF-4745] memory leak fixes (#4931)

* fix app-layout component

* fix card-view component

* fix cloud-layout service

* code fixes

* code fixes

* even more fixes

* even more fixes

* lint fixes

* test fixes

* fix code

* remove useless pipes

* fix code owners

* enable spellcheck for cloud components

* update test

* update test

lib/content-services/search/components/search-control.component.ts

@@ -108,19 +108,24 @@ export class SearchControlComponent implements OnInit, OnDestroy {
         private userPreferencesService: UserPreferencesService
     ) {
 
-        this.toggleSearch.asObservable().pipe(debounceTime(200)).subscribe(() => {
-            if (this.expandable) {
-                this.subscriptAnimationState = this.toggleAnimation();
+        this.toggleSearch
+            .pipe(
+                debounceTime(200),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(() => {
+                if (this.expandable) {
+                    this.subscriptAnimationState = this.toggleAnimation();
 
-                if (this.subscriptAnimationState.value === 'inactive') {
-                    this.searchTerm = '';
-                    this.searchAutocomplete.resetResults();
-                    if ( document.activeElement.id === this.searchInput.nativeElement.id) {
-                        this.searchInput.nativeElement.blur();
+                    if (this.subscriptAnimationState.value === 'inactive') {
+                        this.searchTerm = '';
+                        this.searchAutocomplete.resetResults();
+                        if ( document.activeElement.id === this.searchInput.nativeElement.id) {
+                            this.searchInput.nativeElement.blur();
+                        }
                     }
                 }
-            }
-        });
+            });
     }
 
     applySearchFocus(animationDoneEvent) {
@@ -252,12 +257,12 @@ export class SearchControlComponent implements OnInit, OnDestroy {
 
     private setupFocusEventHandlers() {
         const focusEvents: Observable<FocusEvent> = this.focusSubject
-            .asObservable()
             .pipe(
                 debounceTime(50),
                 filter(($event: any) => {
                     return this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout');
-                })
+                }),
+                takeUntil(this.onDestroy$)
             );
 
         focusEvents.subscribe(() => {

lib/content-services/search/components/search-date-range/search-date-range.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { OnInit, Component, ViewEncapsulation } from '@angular/core';
+import { OnInit, Component, ViewEncapsulation, OnDestroy } from '@angular/core';
 import { FormControl, Validators, FormGroup } from '@angular/forms';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
@@ -26,6 +26,8 @@ import { SearchQueryBuilderService } from '../../search-query-builder.service';
 import { LiveErrorStateMatcher } from '../../forms/live-error-state-matcher';
 import { Moment } from 'moment';
 import { UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 declare let moment: any;
 
@@ -42,7 +44,7 @@ const DEFAULT_FORMAT_DATE: string = 'DD/MM/YYYY';
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-date-range' }
 })
-export class SearchDateRangeComponent implements SearchWidget, OnInit {
+export class SearchDateRangeComponent implements SearchWidget, OnInit, OnDestroy {
 
     from: FormControl;
     to: FormControl;
@@ -56,6 +58,8 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
     maxDate: any;
     datePickerDateFormat = DEFAULT_FORMAT_DATE;
 
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(private dateAdapter: DateAdapter<Moment>,
                 private userPreferencesService: UserPreferencesService) {
     }
@@ -82,9 +86,10 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
         const theCustomDateAdapter = <MomentDateAdapter> <any> this.dateAdapter;
         theCustomDateAdapter.overrideDisplayFormat = this.datePickerDateFormat;
 
-        this.userPreferencesService.select(UserPreferenceValues.Locale).subscribe((locale) => {
-            this.setLocale(locale);
-        });
+        this.userPreferencesService
+            .select(UserPreferenceValues.Locale)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(locale => this.setLocale(locale));
 
         const validators = Validators.compose([
             Validators.required
@@ -101,6 +106,11 @@ export class SearchDateRangeComponent implements SearchWidget, OnInit {
         this.maxDate = this.dateAdapter.today().startOf('day');
     }
 
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
     apply(model: { from: string, to: string }, isValid: boolean) {
         if (isValid && this.id && this.context && this.settings && this.settings.field) {
             const start = moment(model.from).startOf('day').format();

lib/content-services/search/components/search-filter/search-filter.component.ts

@@ -22,8 +22,9 @@ import { SearchQueryBuilderService } from '../../search-query-builder.service';
 import { FacetFieldBucket } from '../../facet-field-bucket.interface';
 import { FacetField } from '../../facet-field.interface';
 import { SearchFilterList } from './models/search-filter-list.model';
-import { takeWhile } from 'rxjs/operators';
-import { ResultSetPaging, GenericBucket, GenericFacetResponse, ResultSetContext } from '@alfresco/js-api';
+import { takeUntil } from 'rxjs/operators';
+import { GenericBucket, GenericFacetResponse, ResultSetContext } from '@alfresco/js-api';
+import { Subject } from 'rxjs';
 
 @Component({
     selector: 'adf-search-filter',
@@ -36,8 +37,6 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
 
     private DEFAULT_PAGE_SIZE = 5;
 
-    isAlive = true;
-
     /** All facet field items to be displayed in the component. These are updated according to the response.
      *  When a new search is performed, the already existing items are updated with the new bucket count values and
      *  the newly received items are added to the responseFacets.
@@ -52,6 +51,8 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
     displayResetButton: boolean;
     selectedBuckets: Array<{ field: FacetField, bucket: FacetFieldBucket }> = [];
 
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(public queryBuilder: SearchQueryBuilderService,
                 private searchService: SearchService,
                 private translationService: TranslationService) {
@@ -68,26 +69,25 @@ export class SearchFilterComponent implements OnInit, OnDestroy {
         }
         this.displayResetButton = this.queryBuilder.config && !!this.queryBuilder.config.resetButton;
 
-        this.queryBuilder.updated.pipe(
-            takeWhile(() => this.isAlive)
-        ).subscribe(() => {
-            this.queryBuilder.execute();
-        });
+        this.queryBuilder.updated
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(() => this.queryBuilder.execute());
     }
 
     ngOnInit() {
         if (this.queryBuilder) {
-            this.queryBuilder.executed.pipe(
-                takeWhile(() => this.isAlive)
-            ).subscribe((resultSetPaging: ResultSetPaging) => {
-                this.onDataLoaded(resultSetPaging);
-                this.searchService.dataLoaded.next(resultSetPaging);
-            });
+            this.queryBuilder.executed
+                .pipe(takeUntil(this.onDestroy$))
+                .subscribe(resultSetPaging => {
+                    this.onDataLoaded(resultSetPaging);
+                    this.searchService.dataLoaded.next(resultSetPaging);
+                });
         }
     }
 
     ngOnDestroy() {
-        this.isAlive = false;
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
     }
 
     private updateSelectedBuckets() {

lib/content-services/search/components/search.component.ts

@@ -27,11 +27,12 @@ import {
     Output,
     TemplateRef,
     ViewChild,
-    ViewEncapsulation
+    ViewEncapsulation,
+    OnDestroy
 } from '@angular/core';
 import { NodePaging } from '@alfresco/js-api';
 import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-search',
@@ -44,7 +45,7 @@ import { debounceTime } from 'rxjs/operators';
         'class': 'adf-search'
     }
 })
-export class SearchComponent implements AfterContentInit, OnChanges {
+export class SearchComponent implements AfterContentInit, OnChanges, OnDestroy {
 
     @ViewChild('panel')
     panel: ElementRef;
@@ -99,25 +100,27 @@ export class SearchComponent implements AfterContentInit, OnChanges {
     }
 
     _isOpen: boolean = false;
-
-    keyPressedStream: Subject<string> = new Subject();
-
+    keyPressedStream = new Subject<string>();
     _classList: { [key: string]: boolean } = {};
+    private onDestroy$ = new Subject<boolean>();
 
     constructor(private searchService: SearchService,
                 private _elementRef: ElementRef) {
-        this.keyPressedStream.asObservable()
+        this.keyPressedStream
             .pipe(
-                debounceTime(200)
+                debounceTime(200),
+                takeUntil(this.onDestroy$)
             )
-            .subscribe((searchedWord: string) => {
+            .subscribe(searchedWord => {
                 this.loadSearchResults(searchedWord);
             });
 
-        searchService.dataLoaded.subscribe(
-            (nodePaging: NodePaging) => this.onSearchDataLoaded(nodePaging),
-            (error) => this.onSearchDataError(error)
-        );
+        searchService.dataLoaded
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(
+                nodePaging => this.onSearchDataLoaded(nodePaging),
+                error => this.onSearchDataError(error)
+            );
     }
 
     ngAfterContentInit() {
@@ -130,6 +133,11 @@ export class SearchComponent implements AfterContentInit, OnChanges {
         }
     }
 
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
     resetResults() {
         this.cleanResults();
         this.setVisibility();