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

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.ts

@@ -22,17 +22,17 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { CommonModule, Location } from '@angular/common';
 import { FolderRulesService } from '../services/folder-rules.service';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
 import { Rule } from '../model/rule.model';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { NodeInfo } from '@alfresco/aca-shared/store';
-import { delay, takeUntil } from 'rxjs/operators';
+import { delay } from 'rxjs/operators';
 import { EditRuleDialogUiComponent } from '../rule-details/edit-rule-dialog.ui-component';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { NotificationService, TemplateModule, ToolbarModule, ConfirmDialogComponent } from '@alfresco/adf-core';
+import { ConfirmDialogComponent, NotificationService, TemplateModule, ToolbarModule } from '@alfresco/adf-core';
 import { ActionDefinitionTransformed } from '../model/rule-action.model';
 import { ActionsService } from '../services/actions.service';
 import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
@@ -48,6 +48,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatDividerModule } from '@angular/material/divider';
 import { RuleListUiComponent } from '../rule-list/rule-list/rule-list.ui-component';
 import { RuleDetailsUiComponent } from '../rule-details/rule-details.ui-component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   standalone: true,
@@ -75,7 +76,7 @@ import { RuleDetailsUiComponent } from '../rule-details/rule-details.ui-componen
   changeDetection: ChangeDetectionStrategy.Default,
   host: { class: 'aca-manage-rules' }
 })
-export class ManageRulesSmartComponent implements OnInit, OnDestroy {
+export class ManageRulesSmartComponent implements OnInit {
   nodeId = '';
   isInheritanceEnabled = true;
   isInheritanceToggleDisabled = false;
@@ -96,8 +97,7 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
   isMainRuleSetNotEmpty = false;
   isInheritedRuleSetsNotEmpty = false;
 
-  private destroyed$ = new Subject<void>();
-  private _actionDefinitionsSub: Subscription;
+  private readonly destroyRef = inject(DestroyRef);
 
   constructor(
     private location: Location,
@@ -122,7 +122,7 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
     this.actionDefinitions$ = this.actionsService.actionDefinitionsListing$;
     this.parameterConstraints$ = this.actionsService.parameterConstraints$;
 
-    this.folderRulesService.deletedRuleId$.pipe(takeUntil(this.destroyed$)).subscribe((deletedRuleId) => this.onRuleDelete(deletedRuleId));
+    this.folderRulesService.deletedRuleId$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((deletedRuleId) => this.onRuleDelete(deletedRuleId));
 
     this.actionsService.loadActionDefinitions();
 
@@ -137,30 +137,24 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
       }
     });
 
-    this._actionDefinitionsSub = this.actionDefinitions$.subscribe((actionDefinitions: ActionDefinitionTransformed[]) =>
-      this.actionsService.loadActionParameterConstraints(actionDefinitions)
-    );
+    this.actionDefinitions$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((actionDefinitions: ActionDefinitionTransformed[]) => this.actionsService.loadActionParameterConstraints(actionDefinitions));
 
-    this.mainRuleSet$.pipe(takeUntil(this.destroyed$)).subscribe((ruleSet) => {
+    this.mainRuleSet$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((ruleSet) => {
       this.canEditMainRule = this.canEditRule(ruleSet);
       this.isMainRuleSetNotEmpty = !!ruleSet;
     });
 
-    this.inheritedRuleSets$.pipe(takeUntil(this.destroyed$)).subscribe((inheritedRuleSet) => {
+    this.inheritedRuleSets$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((inheritedRuleSet) => {
       this.isInheritedRuleSetsNotEmpty = inheritedRuleSet.some((ruleSet) => ruleSet.rules.some((rule: Rule) => rule.isEnabled));
     });
 
-    this.selectedRuleSet$.pipe(takeUntil(this.destroyed$)).subscribe((ruleSet) => {
+    this.selectedRuleSet$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((ruleSet) => {
       this.canEditSelectedRule = this.canEditRule(ruleSet);
     });
   }
 
-  ngOnDestroy() {
-    this.destroyed$.next();
-    this.destroyed$.complete();
-    this._actionDefinitionsSub.unsubscribe();
-  }
-
   goBack(): void {
     this.location.back();
   }

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();
-  }
 }

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

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { RuleSet } from '../../model/rule-set.model';
 import { Rule } from '../../model/rule.model';
 import { RuleGroupingItem } from '../../model/rule-grouping-item.model';
@@ -35,7 +35,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RuleListGroupingUiComponent } from '../rule-list-grouping/rule-list-grouping.ui-component';
 import { RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
-import { Observable, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   standalone: true,
@@ -55,7 +56,7 @@ import { Observable, Subscription } from 'rxjs';
   encapsulation: ViewEncapsulation.None,
   host: { class: 'aca-rule-list' }
 })
-export class RuleListUiComponent implements OnInit, OnDestroy {
+export class RuleListUiComponent implements OnInit {
   @Input()
   mainRuleSet$: Observable<RuleSet>;
   @Input()
@@ -90,10 +91,10 @@ export class RuleListUiComponent implements OnInit, OnDestroy {
   isMainRuleSetOwned = false;
   isMainRuleSetLinked = false;
 
-  private _mainRuleSetSub: Subscription;
+  private readonly destroyRef = inject(DestroyRef);
 
   ngOnInit() {
-    this._mainRuleSetSub = this.mainRuleSet$.subscribe((ruleSet: RuleSet) => {
+    this.mainRuleSet$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((ruleSet: RuleSet) => {
       if (ruleSet) {
         this.mainRuleSet = ruleSet;
         this.isMainRuleSetOwned = FolderRuleSetsService.isOwnedRuleSet(ruleSet, this.folderId);
@@ -114,10 +115,6 @@ export class RuleListUiComponent implements OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
-    this._mainRuleSetSub.unsubscribe();
-  }
-
   getRuleSetGroupingItems(ruleSet: RuleSet, filterOutDisabledRules: boolean): RuleGroupingItem[] {
     const items: RuleGroupingItem[] = ruleSet.rules
       .filter((rule: Rule) => rule.isEnabled || !filterOutDisabledRules)

projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.ts

@@ -22,13 +22,13 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Inject, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, DestroyRef, inject, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
 import { Node } from '@alfresco/js-api';
 import { RuleSet } from '../model/rule-set.model';
-import { BehaviorSubject, combineLatest, from, of, Subject } from 'rxjs';
-import { finalize, map, switchMap, takeUntil } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, from, of } from 'rxjs';
+import { finalize, map, switchMap } from 'rxjs/operators';
 import { NotificationService, TemplateModule } from '@alfresco/adf-core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
@@ -37,6 +37,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { ContentNodeSelectorModule } from '@alfresco/adf-content-services';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { RuleListItemUiComponent } from '../rule-list/rule-list-item/rule-list-item.ui-component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface RuleSetPickerOptions {
   nodeId: string;
@@ -64,7 +65,7 @@ export interface RuleSetPickerOptions {
   host: { class: 'aca-rule-set-picker' },
   providers: [FolderRuleSetsService]
 })
-export class RuleSetPickerSmartComponent implements OnInit, OnDestroy {
+export class RuleSetPickerSmartComponent implements OnInit {
   nodeId = '-root-';
   defaultNodeId = '-root-';
   isBusy = false;
@@ -79,7 +80,7 @@ export class RuleSetPickerSmartComponent implements OnInit, OnDestroy {
     map(([rulesLoading, folderLoading]) => rulesLoading || folderLoading)
   );
 
-  onDestroy$ = new Subject<void>();
+  private readonly destroyRef = inject(DestroyRef);
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: RuleSetPickerOptions,
@@ -93,16 +94,11 @@ export class RuleSetPickerSmartComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.mainRuleSet$.pipe(takeUntil(this.onDestroy$)).subscribe((mainRuleSet) => {
+    this.mainRuleSet$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((mainRuleSet) => {
       this.hasOwnedRules = mainRuleSet?.rules.length > 0 && FolderRuleSetsService.isOwnedRuleSet(mainRuleSet, this.selectedNodeId);
     });
   }
 
-  ngOnDestroy(): void {
-    this.onDestroy$.next();
-    this.onDestroy$.complete();
-  }
-
   onNodeSelect(nodes: Node[]) {
     if (nodes?.length && nodes[0].isFolder && nodes[0].id !== this.selectedNodeId) {
       this.selectedNodeId = nodes[0].id;