[ACS-7366] fix infinite re-rendering (#3739)

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

@@ -60,7 +60,7 @@
 
           <div class="aca-manage-rules__container" *ngIf="isMainRuleSetNotEmpty || isInheritedRuleSetsNotEmpty; else emptyContent">
             <aca-rule-list
-              [mainRuleSet]="mainRuleSet$ | async"
+              [mainRuleSet$]="mainRuleSet$"
               [folderId]="nodeId"
               [inheritedRuleSets]="inheritedRuleSets$ | async"
               [hasMoreRuleSets]="hasMoreRuleSets$ | async"

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

@@ -211,7 +211,8 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
   }
 
   async onRuleEnabledToggle(rule: Rule, isEnabled: boolean) {
-    await this.folderRulesService.updateRule(this.nodeId, rule.id, { ...rule, isEnabled });
+    const updatedRule = await this.folderRulesService.updateRule(this.nodeId, rule.id, { ...rule, isEnabled });
+    this.folderRuleSetsService.addOrUpdateRuleInMainRuleSet(updatedRule);
   }
 
   async onInheritanceToggleChange(event: MatSlideToggleChange) {

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

@@ -80,7 +80,7 @@
     <ng-template #emptyLinkedRuleSet>
       <div class="aca-rule-list__item__all-linked-rules-are-disabled">
         {{ 'ACA_FOLDER_RULES.RULE_LIST.ALL_LINKED_RULES_ARE_DISABLED' | translate }}
-        <button mat-stroked-button [routerLink]="['/nodes', mainRuleSet.owningFolder.id, 'rules']">
+        <button *ngIf="mainRuleSet?.owningFolder?.id" mat-stroked-button [routerLink]="['/nodes', mainRuleSet.owningFolder.id, 'rules']">
           {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.SEE_IN_FOLDER' | translate }}
         </button>
       </div>

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

@@ -29,6 +29,7 @@ import { ownedRuleSetMock, ruleSetsMock, ruleSetWithLinkMock } from '../../mock/
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { owningFolderIdMock } from '../../mock/node.mock';
+import { of } from 'rxjs';
 
 describe('RuleListUiComponent', () => {
   let fixture: ComponentFixture<RuleListUiComponent>;
@@ -49,7 +50,7 @@ describe('RuleListUiComponent', () => {
   });
 
   it('should show "Rules from current folder" as a title if the main rule set is owned', () => {
-    component.mainRuleSet = ownedRuleSetMock;
+    component.mainRuleSet$ = of(ownedRuleSetMock);
     fixture.detectChanges();
 
     const mainRuleSetTitleElement = debugElement.query(By.css(`[data-automation-id="main-rule-set-title"]`));
@@ -57,7 +58,7 @@ describe('RuleListUiComponent', () => {
   });
 
   it('should show "Rules from linked folder" as a title if the main rule set is linked', () => {
-    component.mainRuleSet = ruleSetWithLinkMock;
+    component.mainRuleSet$ = of(ruleSetWithLinkMock);
     fixture.detectChanges();
 
     const mainRuleSetTitleElement = debugElement.query(By.css(`[data-automation-id="main-rule-set-title"]`));

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, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, 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,6 +35,7 @@ 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';
 
 @Component({
   standalone: true,
@@ -54,9 +55,9 @@ import { MatButtonModule } from '@angular/material/button';
   encapsulation: ViewEncapsulation.None,
   host: { class: 'aca-rule-list' }
 })
-export class RuleListUiComponent {
+export class RuleListUiComponent implements OnInit, OnDestroy {
   @Input()
-  mainRuleSet: RuleSet = null;
+  mainRuleSet$: Observable<RuleSet>;
   @Input()
   folderId: string;
   @Input()
@@ -81,31 +82,40 @@ export class RuleListUiComponent {
   @Output()
   ruleSetUnlinkClicked = new EventEmitter<RuleSet>();
 
+  mainRuleSet: RuleSet = null;
   inheritedRuleSetsExpanded = true;
   mainRuleSetExpanded = true;
+  mainRuleSetGroupingItems: RuleGroupingItem[] = [];
+  inheritedRuleSetGroupingItems: RuleGroupingItem[] = [];
+  isMainRuleSetOwned = false;
+  isMainRuleSetLinked = false;
 
-  get isMainRuleSetOwned(): boolean {
-    return FolderRuleSetsService.isOwnedRuleSet(this.mainRuleSet, this.folderId);
-  }
-  get isMainRuleSetLinked(): boolean {
-    return FolderRuleSetsService.isLinkedRuleSet(this.mainRuleSet, this.folderId);
+  private _mainRuleSetSub: Subscription;
+
+  ngOnInit() {
+    this._mainRuleSetSub = this.mainRuleSet$.subscribe((ruleSet: RuleSet) => {
+      if (ruleSet) {
+        this.mainRuleSet = ruleSet;
+        this.isMainRuleSetOwned = FolderRuleSetsService.isOwnedRuleSet(ruleSet, this.folderId);
+        this.isMainRuleSetLinked = FolderRuleSetsService.isLinkedRuleSet(ruleSet, this.folderId);
       }
 
-  get mainRuleSetGroupingItems(): RuleGroupingItem[] {
-    return this.mainRuleSet ? this.getRuleSetGroupingItems(this.mainRuleSet, !this.isMainRuleSetOwned) : [];
-  }
+      this.mainRuleSetGroupingItems = ruleSet ? this.getRuleSetGroupingItems(ruleSet, !this.isMainRuleSetOwned) : [];
+    });
 
-  get inheritedRuleSetGroupingItems(): RuleGroupingItem[] {
-    const items = this.inheritedRuleSets.reduce((accumulator: RuleGroupingItem[], currentRuleSet: RuleSet) => {
+    this.inheritedRuleSetGroupingItems = this.inheritedRuleSets.reduce((accumulator: RuleGroupingItem[], currentRuleSet: RuleSet) => {
       accumulator.push(...this.getRuleSetGroupingItems(currentRuleSet, true));
       return accumulator;
     }, []);
     if (this.ruleSetsLoading || this.hasMoreRuleSets) {
-      items.push({
+      this.inheritedRuleSetGroupingItems.push({
         type: this.ruleSetsLoading ? 'loading' : 'load-more-rule-sets'
       });
     }
-    return items;
+  }
+
+  ngOnDestroy() {
+    this._mainRuleSetSub.unsubscribe();
   }
 
   getRuleSetGroupingItems(ruleSet: RuleSet, filterOutDisabledRules: boolean): RuleGroupingItem[] {

projects/aca-content/folder-rules/src/services/folder-rule-sets.service.ts

@@ -210,8 +210,8 @@ export class FolderRuleSetsService {
           this.mainRuleSet.rules.splice(index, 1);
         } else {
           this.mainRuleSet = null;
-          this.mainRuleSetSource.next(this.mainRuleSet);
         }
+        this.mainRuleSetSource.next(this.mainRuleSet);
         this.folderRulesService.selectRule(this.mainRuleSet?.rules[0] ?? this.inheritedRuleSets[0]?.rules[0] ?? null);
       }
     }
@@ -225,6 +225,7 @@ export class FolderRuleSetsService {
       } else {
         this.mainRuleSet.rules.push(newRule);
       }
+      this.mainRuleSetSource.next(this.mainRuleSet);
       this.folderRulesService.selectRule(newRule);
     } else {
       this.refreshMainRuleSet(newRule);
@@ -234,6 +235,9 @@ export class FolderRuleSetsService {
   refreshMainRuleSet(ruleToSelect: Rule = null) {
     this.getMainRuleSet(this.currentFolder.id).subscribe((mainRuleSet: RuleSet) => {
       this.mainRuleSet = { ...mainRuleSet };
+      if (!this.mainRuleSet.rules) {
+        this.mainRuleSet = null;
+      }
       this.mainRuleSetSource.next(this.mainRuleSet);
       if (mainRuleSet) {
         const ruleToSelectInRuleSet = ruleToSelect ? mainRuleSet.rules.find((rule: Rule) => rule.id === ruleToSelect.id) : mainRuleSet.rules[0];