[ACS-3513] [ACS-3515] Create, edit and delete rule set link (#2810)

projects/aca-folder-rules/assets/i18n/en.json

@@ -93,6 +93,7 @@
         },
         "ACTIONS": {
           "CREATE_RULE": "Create rule",
+          "LINK_RULES": "Link rules",
           "EDIT_RULE": "Edit",
           "SEE_IN_FOLDER": "See in folder"
         }
@@ -106,6 +107,10 @@
       "DELETE_RULE": {
         "TITLE": "Delete rule",
         "MESSAGE": "Are you sure you want to delete this rule?"
+      },
+      "DELETE_RULE_SET_LINK": {
+        "TITLE": "Delete rule set link",
+        "MESSAGE": "Are you sure you want to delete the link to this rule set?"
       }
     },
     "RULE_LIST": {
@@ -116,6 +121,22 @@
       "LOAD_MORE_RULES": "Load more rules",
       "LOADING_RULES": "Loading rules",
       "INHERITED_RULES_WILL_BE_RUN_FIRST": "Inherited rules will be run first"
+    },
+    "LINK_RULES_DIALOG": {
+      "TITLE": "Select a folder to link rules from",
+      "CANCEL": "Cancel",
+      "SUBMIT": "Select folder",
+      "EMPTY_RULES_LIST": {
+        "TITLE": "No owned rules",
+        "SUBTITLE": "The selected folder doesn't have any rules of its own."
+      },
+      "LIST_OF_RULES_TO_LINK": "List of rules that will be linked",
+      "ERRORS": {
+        "REQUEST_FAILED": "Error while trying to create a link to a rule set"
+      }
+    },
+    "ERRORS": {
+      "DELETE_RULE_SET_LINK_FAILED": "Error while trying to delete a link from a rule set"
     }
   }
 }

projects/aca-folder-rules/src/lib/folder-rules.module.ts

@@ -35,7 +35,7 @@ import { RuleCompositeConditionUiComponent } from './rule-details/conditions/rul
 import { RuleDetailsUiComponent } from './rule-details/rule-details.ui-component';
 import { RuleSimpleConditionUiComponent } from './rule-details/conditions/rule-simple-condition.ui-component';
 import { GenericErrorModule, PageLayoutModule } from '@alfresco/aca-shared';
-import { BreadcrumbModule, DocumentListModule } from '@alfresco/adf-content-services';
+import { BreadcrumbModule, ContentNodeSelectorModule, DocumentListModule } from '@alfresco/adf-content-services';
 import { RuleListItemUiComponent } from './rule-list/rule-list-item/rule-list-item.ui-component';
 import { RuleListGroupingUiComponent } from './rule-list/rule-list-grouping/rule-list-grouping.ui-component';
 import { RuleTriggersUiComponent } from './rule-details/triggers/rule-triggers.ui-component';
@@ -43,6 +43,7 @@ import { RuleOptionsUiComponent } from './rule-details/options/rule-options.ui-c
 import { RuleActionListUiComponent } from './rule-details/actions/rule-action-list.ui-component';
 import { RuleActionUiComponent } from './rule-details/actions/rule-action.ui-component';
 import { RuleListUiComponent } from './rule-list/rule-list/rule-list.ui-component';
+import { RuleSetPickerSmartComponent } from './rule-set-picker/rule-set-picker.smart-component';
 
 const routes: Routes = [
   {
@@ -61,7 +62,8 @@ const routes: Routes = [
     BreadcrumbModule,
     DocumentListModule,
     ExtensionsModule,
-    GenericErrorModule
+    GenericErrorModule,
+    ContentNodeSelectorModule
   ],
   declarations: [
     EditRuleDialogSmartComponent,
@@ -73,6 +75,7 @@ const routes: Routes = [
     RuleListGroupingUiComponent,
     RuleListItemUiComponent,
     RuleListUiComponent,
+    RuleSetPickerSmartComponent,
     RuleSimpleConditionUiComponent,
     RuleTriggersUiComponent,
     RuleOptionsUiComponent

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

@@ -26,13 +26,22 @@
                               class="aca-manage-rules__actions-bar__title__breadcrumb"></adf-breadcrumb>
             </adf-toolbar-title>
 
-            <button
+            <div class="aca-manage-rules__actions-bar__buttons">
-              *ngIf="canEditRule(mainRuleSet$ | async)"
+              <button
-              data-automation-id="manage-rules-create-button"
+                *ngIf="!(mainRuleSet$ | async)"
-              mat-flat-button color="primary"
+                mat-stroked-button
-              (click)="openCreateUpdateRuleDialog()">
+                (click)="openLinkRulesDialog()">
-              {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.CREATE_RULE' | translate }}
+                {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.LINK_RULES' | translate }}
-            </button>
+              </button>
+
+              <button
+                *ngIf="canEditRule(mainRuleSet$ | async)"
+                data-automation-id="manage-rules-create-button"
+                mat-flat-button color="primary"
+                (click)="openCreateUpdateRuleDialog()">
+                {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.CREATE_RULE' | translate }}
+              </button>
+            </div>
 
           </adf-toolbar>
           <mat-divider></mat-divider>
@@ -48,7 +57,9 @@
               (loadMoreRuleSets)="onLoadMoreRuleSets()"
               (loadMoreRules)="onLoadMoreRules($event)"
               (selectRule)="onSelectRule($event)"
-              (ruleEnabledChanged)="onRuleEnabledToggle($event[0], $event[1])">
+              (ruleEnabledChanged)="onRuleEnabledToggle($event[0], $event[1])"
+              (ruleSetEditLinkClicked)="openLinkRulesDialog($event)"
+              (ruleSetUnlinkClicked)="onRuleSetUnlinkClicked($event)">
             </aca-rule-list>
 
             <div class="aca-manage-rules__container__rule-details">

projects/aca-folder-rules/src/lib/manage-rules/manage-rules.smart-component.scss

@@ -13,6 +13,12 @@
         margin-left: 18px;
       }
     }
+
+    &__buttons {
+      display: flex;
+      align-items: stretch;
+      gap: 4px;
+    }
   }
 
   &__container {

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

@@ -39,6 +39,7 @@ import { ActionDefinitionTransformed } from '../model/rule-action.model';
 import { ActionsService } from '../services/actions.service';
 import { FolderRuleSetsService } from '../services/folder-rule-sets.service';
 import { RuleSet } from '../model/rule-set.model';
+import { RuleSetPickerSmartComponent } from '../rule-set-picker/rule-set-picker.smart-component';
 
 @Component({
   selector: 'aca-manage-rules',
@@ -184,4 +185,45 @@ export class ManageRulesSmartComponent implements OnInit, OnDestroy {
   canEditRule(ruleSet: RuleSet): boolean {
     return !ruleSet || FolderRuleSetsService.isOwnedRuleSet(ruleSet, this.nodeId);
   }
+
+  openLinkRulesDialog(existingRuleSet?: RuleSet) {
+    this.matDialogService
+      .open(RuleSetPickerSmartComponent, {
+        width: '90%',
+        panelClass: 'aca-rule-set-picker-container',
+        data: {
+          nodeId: this.nodeId,
+          defaultNodeId: this.nodeId,
+          existingRuleSet
+        }
+      })
+      .afterClosed()
+      .subscribe((result) => {
+        if (result) {
+          this.folderRuleSetsService.refreshMainRuleSet();
+        }
+      });
+  }
+
+  onRuleSetUnlinkClicked(linkedRuleSet: RuleSet) {
+    this.matDialogService
+      .open(ConfirmDialogComponent, {
+        data: {
+          title: 'ACA_FOLDER_RULES.CONFIRMATION_DIALOG.DELETE_RULE_SET_LINK.TITLE',
+          message: 'ACA_FOLDER_RULES.CONFIRMATION_DIALOG.DELETE_RULE_SET_LINK.MESSAGE'
+        },
+        minWidth: '346px'
+      })
+      .afterClosed()
+      .subscribe(async (result) => {
+        if (result) {
+          try {
+            await this.folderRuleSetsService.deleteRuleSetLink(this.nodeId, linkedRuleSet.id);
+            this.folderRuleSetsService.refreshMainRuleSet();
+          } catch (error) {
+            this.notificationService.showError('ACA_FOLDER_RULES.ERRORS.DELETE_RULE_SET_LINK_FAILED');
+          }
+        }
+      });
+  }
 }

projects/aca-folder-rules/src/lib/rule-details/edit-rule-dialog.smart-component.spec.ts

@@ -39,7 +39,6 @@ import { timer } from 'rxjs';
 
 describe('EditRuleDialogSmartComponent', () => {
   let fixture: ComponentFixture<EditRuleDialogSmartComponent>;
-  let actionsService: ActionsService;
 
   const dialogRef = {
     close: jasmine.createSpy('close'),
@@ -64,9 +63,8 @@ describe('EditRuleDialogSmartComponent', () => {
       ]
     });
 
-    actionsService = TestBed.inject(ActionsService);
+    spyOn(ActionsService.prototype, 'loadActionDefinitions').and.stub();
-    spyOn(actionsService, 'loadActionDefinitions').and.stub();
+    spyOn(ActionsService.prototype, 'getParameterConstraints').and.stub();
-    spyOn(actionsService, 'getParameterConstraints').and.stub();
 
     fixture = TestBed.createComponent(EditRuleDialogSmartComponent);
     fixture.detectChanges();

projects/aca-folder-rules/src/lib/rule-details/edit-rule-dialog.smart-component.ts

@@ -38,7 +38,8 @@ export interface EditRuleDialogOptions {
   templateUrl: './edit-rule-dialog.smart-component.html',
   styleUrls: ['./edit-rule-dialog.smart-component.scss'],
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'aca-edit-rule-dialog' }
+  host: { class: 'aca-edit-rule-dialog' },
+  providers: [{ provide: ActionsService, useClass: ActionsService }]
 })
 export class EditRuleDialogSmartComponent implements OnInit, OnDestroy {
   formValid = false;

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

@@ -6,6 +6,7 @@
     tabindex="0"
     [rule]="item.rule"
     [isSelected]="isSelected(item.rule)"
+    [showEnabledToggle]="showEnabledToggles"
     (click)="onRuleClicked(item.rule)"
     (enabledChanged)="onEnabledChanged(item.rule, $event)">
   </aca-rule-list-item>

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

@@ -62,10 +62,8 @@ describe('RuleListGroupingUiComponent', () => {
     const rule = debugElement.query(By.css('.aca-rule-list-item:first-child'));
     const name = rule.query(By.css('.aca-rule-list-item__header__name'));
     const description = rule.query(By.css('.aca-rule-list-item__description'));
-    const toggleBtn = rule.query(By.css('mat-slide-toggle'));
 
     expect(name.nativeElement.textContent).toBe(rulesMock[0].name);
-    expect(toggleBtn).toBeTruthy();
     expect(description.nativeElement.textContent).toBe(rulesMock[0].description);
   });
 });

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

@@ -40,6 +40,8 @@ export class RuleListGroupingUiComponent {
   items: RuleGroupingItem[] = [];
   @Input()
   selectedRule: Rule = null;
+  @Input()
+  showEnabledToggles = false;
 
   @Output()
   selectRule = new EventEmitter<Rule>();

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

@@ -3,6 +3,7 @@
   <span class="aca-rule-list-item__header__name">{{ rule.name }}</span>
 
   <mat-slide-toggle
+    *ngIf="showEnabledToggle"
     [checked]="rule.isEnabled"
     (click)="onToggleClick(!rule.isEnabled, $event)">
   </mat-slide-toggle>

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

@@ -39,6 +39,8 @@ export class RuleListItemUiComponent {
   @Input()
   @HostBinding('class.selected')
   isSelected: boolean;
+  @Input()
+  showEnabledToggle = false;
 
   @Output()
   enabledChanged = new EventEmitter<boolean>();

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

@@ -4,26 +4,22 @@
   data-automation-id="rule-list-item"
   [ngClass]="{ expanded: inheritedRuleSetsExpanded }">
 
-  <div class="aca-rule-list__item__header">
+  <div
+    tabindex="0"
+    class="aca-rule-list__item__header"
+    matRipple matRippleColor="hsla(0,0%,0%,0.05)"
+    (click)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded"
+    (keyup.enter)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded">
 
-    <div
+    <span class="aca-rule-list__item__header__title">
-      tabindex="0"
+      {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
-      class="aca-rule-list__item__header__title"
+      <mat-icon [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
-      matRipple matRippleColor="hsla(0,0%,0%,0.05)"
+        info
-      (click)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded"
-      (keyup.enter)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded">
-
-      <span class="aca-rule-list__item__header__title__text">
-        {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
-        <mat-icon [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
-          info
-        </mat-icon>
-      </span>
-      <mat-icon class="aca-rule-list__item__header__icon">
-        {{ inheritedRuleSetsExpanded ? 'expand_more' : 'chevron_right' }}
       </mat-icon>
-    </div>
+    </span>
-
+    <mat-icon class="aca-rule-list__item__header__icon">
+      {{ inheritedRuleSetsExpanded ? 'expand_more' : 'chevron_right' }}
+    </mat-icon>
   </div>
 
   <aca-rule-list-grouping
@@ -44,34 +40,37 @@
   data-automation-id="rule-list-item"
   [ngClass]="{ expanded: mainRuleSetExpanded }">
 
-  <div class="aca-rule-list__item__header">
+  <div
-
+    tabindex="0"
-    <div
+    class="aca-rule-list__item__header"
-      tabindex="0"
+    matRipple matRippleColor="hsla(0,0%,0%,0.05)"
-      class="aca-rule-list__item__header__title"
+    (click)="mainRuleSetExpanded = !mainRuleSetExpanded"
-      data-automation-id="main-rule-set-title"
+    (keyup.enter)="mainRuleSetExpanded = !mainRuleSetExpanded">
-      matRipple matRippleColor="hsla(0,0%,0%,0.05)"
-      (click)="mainRuleSetExpanded = !mainRuleSetExpanded"
-      (keyup.enter)="mainRuleSetExpanded = !mainRuleSetExpanded">
 
+    <span class="aca-rule-list__item__header__title" data-automation-id="main-rule-set-title">
       <ng-container *ngIf="isMainRuleSetOwned; else linkedRuleSet">
         {{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES' | translate }}
       </ng-container>
       <ng-template #linkedRuleSet>
           {{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES' | translate }}
       </ng-template>
+    </span>
 
-      <mat-icon class="aca-rule-list__item__header__icon">
+    <ng-container *ngIf="!isMainRuleSetOwned">
-        {{ mainRuleSetExpanded ? 'expand_more' : 'chevron_right' }}
+      <mat-icon class="aca-rule-list__item__header__icon" (click)="onRuleSetEditLinkClicked($event)">edit</mat-icon>
-      </mat-icon>
+      <mat-icon class="aca-rule-list__item__header__icon" (click)="onRuleSetUnlinkClicked($event)">link_off</mat-icon>
-    </div>
+    </ng-container>
 
+    <mat-icon class="aca-rule-list__item__header__icon">
+      {{ mainRuleSetExpanded ? 'expand_more' : 'chevron_right' }}
+    </mat-icon>
   </div>
 
   <aca-rule-list-grouping
     *ngIf="mainRuleSetExpanded"
     [items]="mainRuleSetGroupingItems"
     [selectedRule]="selectedRule"
+    [showEnabledToggles]="isMainRuleSetOwned"
     (selectRule)="onSelectRule($event)"
     (ruleEnabledChanged)="onRuleEnabledChanged($event)"
     (loadMoreRules)="onLoadMoreRules($event)">

projects/aca-folder-rules/src/lib/rule-list/rule-list/rule-list.ui-component.scss

@@ -14,31 +14,29 @@
     &__header {
       display: flex;
       flex-direction: row;
+      gap: 4px;
       align-items: stretch;
       cursor: pointer;
       color: var(--theme-text-color);
       user-select: none;
       font-size: 0.9em;
+      padding: 0.5em 1em;
 
       & > * {
         display: flex;
         flex-direction: row;
         align-items: center;
-        justify-content: space-between;
       }
 
       &__title {
-        padding: 0.5em 1em;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
         flex: 1;
 
-        &__text {
+        .mat-icon {
-          display: flex;
+          transform: scale(0.8);
-          flex-direction: row;
-          align-items: center;
-
-          .mat-icon {
-            transform: scale(0.8);
-          }
         }
       }
     }

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

@@ -38,8 +38,6 @@ describe('RuleListUiComponent', () => {
   let component: RuleListUiComponent;
   let debugElement: DebugElement;
 
-  const innerTextWithoutIcon = (element: HTMLDivElement): string => element.innerText.replace(/(expand_more|chevron_right)$/, '').trim();
-
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [CoreTestingModule],
@@ -59,7 +57,7 @@ describe('RuleListUiComponent', () => {
     fixture.detectChanges();
 
     const mainRuleSetTitleElement = debugElement.query(By.css(`[data-automation-id="main-rule-set-title"]`));
-    expect(innerTextWithoutIcon(mainRuleSetTitleElement.nativeElement as HTMLDivElement)).toBe('ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES');
+    expect((mainRuleSetTitleElement.nativeElement as HTMLDivElement).innerText.trim()).toBe('ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES');
   });
 
   it('should show "Rules from linked folder" as a title if the main rule set is linked', () => {
@@ -67,6 +65,6 @@ describe('RuleListUiComponent', () => {
     fixture.detectChanges();
 
     const mainRuleSetTitleElement = debugElement.query(By.css(`[data-automation-id="main-rule-set-title"]`));
-    expect(innerTextWithoutIcon(mainRuleSetTitleElement.nativeElement as HTMLDivElement)).toBe('ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES');
+    expect((mainRuleSetTitleElement.nativeElement as HTMLDivElement).innerText.trim()).toBe('ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES');
   });
 });

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

@@ -58,6 +58,10 @@ export class RuleListUiComponent {
   selectRule = new EventEmitter<Rule>();
   @Output()
   ruleEnabledChanged = new EventEmitter<[Rule, boolean]>();
+  @Output()
+  ruleSetEditLinkClicked = new EventEmitter<RuleSet>();
+  @Output()
+  ruleSetUnlinkClicked = new EventEmitter<RuleSet>();
 
   inheritedRuleSetsExpanded = true;
   mainRuleSetExpanded = true;
@@ -118,4 +122,14 @@ export class RuleListUiComponent {
   onRuleEnabledChanged(event: [Rule, boolean]) {
     this.ruleEnabledChanged.emit(event);
   }
+
+  onRuleSetEditLinkClicked(event: Event) {
+    event.stopPropagation();
+    this.ruleSetEditLinkClicked.emit(this.mainRuleSet);
+  }
+
+  onRuleSetUnlinkClicked(event: Event) {
+    event.stopPropagation();
+    this.ruleSetUnlinkClicked.emit(this.mainRuleSet);
+  }
 }

projects/aca-folder-rules/src/lib/rule-set-picker/rule-set-picker.smart-component.html

@@ -0,0 +1,59 @@
+<div mat-dialog-title class="aca-rule-set-picker__header">
+  <div class="aca-rule-set-picker__header__title">
+    {{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.TITLE' | translate }}
+  </div>
+  <button mat-icon-button mat-dialog-close class="aca-rule-set-picker__header__close" tabindex="-1">
+    <mat-icon>close</mat-icon>
+  </button>
+</div>
+
+<mat-dialog-content class="aca-rule-set-picker__content">
+  <adf-content-node-selector-panel
+    class="aca-rule-set-picker__content__node-selector"
+    [currentFolderId]="defaultNodeId"
+    (select)="onNodeSelect($event)"
+    (folderLoaded)="setFolderLoading(false)"
+    (navigationChange)="setFolderLoading(true)"
+    (siteChange)="setFolderLoading(true)">
+  </adf-content-node-selector-panel>
+
+  <div class="aca-rule-set-picker__content__rule-list" [ngClass]="{ justify: rulesLoading$ | async }">
+    <ng-container *ngIf="rulesLoading$ | async; else rulesLoaded">
+      <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
+    </ng-container>
+
+    <ng-template #rulesLoaded>
+      <ng-container *ngIf="hasOwnedRules(mainRuleSet$ | async); else noOwnedRules">
+        <div class="aca-rule-set-picker__content__rule-list__header">
+          {{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.LIST_OF_RULES_TO_LINK' | translate }}
+        </div>
+
+        <aca-rule-list-item
+          *ngFor="let rule of (mainRuleSet$ | async).rules"
+          [rule]="rule">
+        </aca-rule-list-item>
+      </ng-container>
+
+      <ng-template #noOwnedRules>
+        <adf-empty-content
+          icon="library_books"
+          [title]="'ACA_FOLDER_RULES.LINK_RULES_DIALOG.EMPTY_RULES_LIST.TITLE' | translate"
+          [subtitle]="'ACA_FOLDER_RULES.LINK_RULES_DIALOG.EMPTY_RULES_LIST.SUBTITLE' | translate">
+        </adf-empty-content>
+      </ng-template>
+    </ng-template>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end" class="aca-rule-set-picker__footer">
+  <button mat-flat-button mat-dialog-close>
+    {{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.CANCEL' | translate }}
+  </button>
+
+  <button
+    mat-flat-button color="primary"
+    [disabled]="!hasOwnedRules(mainRuleSet$ | async) || isBusy"
+    (click)="onSubmit()">
+    {{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.SUBMIT' | translate }}
+  </button>
+</mat-dialog-actions>

projects/aca-folder-rules/src/lib/rule-set-picker/rule-set-picker.smart-component.scss

@@ -0,0 +1,76 @@
+.aca-rule-set-picker-container {
+  --rule-set-picker-padding: 8px 20px;
+
+  .mat-dialog-container {
+    padding: 0;
+  }
+}
+
+.aca-rule-set-picker {
+  &__header {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: var(--rule-set-picker-padding);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--theme-border-color);
+
+    &__title {
+      font-size: 16px;
+      font-weight: bold;
+      flex-grow: 1;
+    }
+
+    &__close {
+      & mat-icon {
+        font-size: 18px;
+      }
+    }
+  }
+
+  &__content {
+    position: relative;
+    height: 80vh;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 2fr minmax(250px, 1fr);
+
+    &__node-selector {
+      padding: 0 20px;
+      box-sizing: border-box;
+    }
+
+    &__rule-list {
+      padding: 0 20px 0 0;
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+      max-height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      &.justify {
+        align-items: center;
+        justify-content: center;
+      }
+
+      &__header {
+        color: var(--theme-text-color);
+        font-size: 0.9em;
+        margin: 8px 0;
+      }
+
+      .aca-rule-list-item {
+        cursor: default;
+      }
+    }
+  }
+
+  &__footer {
+    margin: 0;
+    padding: var(--rule-set-picker-padding);
+    box-sizing: border-box;
+    border-top: 1px solid var(--theme-border-color);
+  }
+}

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

@@ -0,0 +1,116 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, 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 } from 'rxjs';
+import { finalize, map, switchMap } from 'rxjs/operators';
+import { NotificationService } from '@alfresco/adf-core';
+
+export interface RuleSetPickerOptions {
+  nodeId: string;
+  defaultNodeId: string;
+  existingRuleSet?: RuleSet;
+}
+
+@Component({
+  selector: 'aca-rule-set-picker',
+  templateUrl: './rule-set-picker.smart-component.html',
+  styleUrls: ['./rule-set-picker.smart-component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'aca-rule-set-picker' },
+  providers: [
+    {
+      provide: FolderRuleSetsService,
+      useClass: FolderRuleSetsService
+    }
+  ]
+})
+export class RuleSetPickerSmartComponent {
+  nodeId = '-root-';
+  defaultNodeId = '-root-';
+  isBusy = false;
+  existingRuleSet: RuleSet = null;
+
+  private selectedNodeId = '';
+  private folderLoading$ = new BehaviorSubject<boolean>(true);
+
+  mainRuleSet$ = this.folderRuleSetsService.mainRuleSet$;
+  rulesLoading$ = combineLatest(this.folderRuleSetsService.isLoading$, this.folderLoading$).pipe(
+    map(([rulesLoading, folderLoading]) => rulesLoading || folderLoading)
+  );
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: RuleSetPickerOptions,
+    private folderRuleSetsService: FolderRuleSetsService,
+    private dialogRef: MatDialogRef<RuleSetPickerSmartComponent>,
+    private notificationService: NotificationService
+  ) {
+    this.nodeId = this.data?.nodeId ?? '-root-';
+    this.defaultNodeId = this.data?.defaultNodeId ?? '-root-';
+    this.existingRuleSet = this.data?.existingRuleSet ?? null;
+  }
+
+  hasOwnedRules(ruleSet: RuleSet): boolean {
+    return ruleSet?.rules.length > 0 && FolderRuleSetsService.isOwnedRuleSet(ruleSet, this.selectedNodeId);
+  }
+
+  onNodeSelect(nodes: Node[]) {
+    if (nodes?.length && nodes[0].isFolder && nodes[0].id !== this.selectedNodeId) {
+      this.selectedNodeId = nodes[0].id;
+      this.folderRuleSetsService.loadRuleSets(this.selectedNodeId, false);
+    }
+  }
+
+  setFolderLoading(isLoading: boolean) {
+    this.folderLoading$.next(isLoading);
+  }
+
+  onSubmit() {
+    this.isBusy = true;
+    from(this.existingRuleSet ? this.folderRuleSetsService.deleteRuleSetLink(this.nodeId, this.existingRuleSet.id) : of(null))
+      .pipe(
+        switchMap(() => from(this.folderRuleSetsService.createRuleSetLink(this.nodeId, this.selectedNodeId))),
+        finalize(() => {
+          this.isBusy = false;
+        })
+      )
+      .subscribe(
+        () => {
+          this.dialogRef.close(true);
+        },
+        () => {
+          this.handleError();
+        }
+      );
+  }
+
+  private handleError() {
+    this.notificationService.showError('ACA_FOLDER_RULES.LINK_RULES_DIALOG.ERRORS.REQUEST_FAILED');
+  }
+}

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

@@ -41,10 +41,10 @@ export class FolderRuleSetsService {
   public static MAX_RULE_SETS_PER_GET = 100;
 
   static isOwnedRuleSet(ruleSet: RuleSet, nodeId: string): boolean {
-    return ruleSet.owningFolder.id === nodeId;
+    return ruleSet?.owningFolder?.id === nodeId;
   }
   static isLinkedRuleSet(ruleSet: RuleSet, nodeId: string): boolean {
-    return ruleSet.linkedToBy.indexOf(nodeId) > -1;
+    return ruleSet?.linkedToBy.indexOf(nodeId) > -1;
   }
   static isMainRuleSet(ruleSet: RuleSet, nodeId: string): boolean {
     return this.isOwnedRuleSet(ruleSet, nodeId) || this.isLinkedRuleSet(ruleSet, nodeId);
@@ -72,11 +72,13 @@ export class FolderRuleSetsService {
 
   selectedRuleSet$ = this.folderRulesService.selectedRule$.pipe(
     map((rule: Rule) => {
+      if (rule === null) {
+        return null;
+      }
       if (this.mainRuleSet?.rules.findIndex((r: Rule) => r.id === rule.id) > -1) {
         return this.mainRuleSet;
-      } else {
-        return this.inheritedRuleSets.find((ruleSet: RuleSet) => ruleSet.rules.findIndex((r: Rule) => r.id === rule.id) > -1) ?? null;
       }
+      return this.inheritedRuleSets.find((ruleSet: RuleSet) => ruleSet.rules.findIndex((r: Rule) => r.id === rule.id) > -1) ?? null;
     })
   );
 
@@ -117,7 +119,7 @@ export class FolderRuleSetsService {
     );
   }
 
-  loadRuleSets(nodeId: string) {
+  loadRuleSets(nodeId: string, loadInheritedRuleSets = true) {
     this.isLoadingSource.next(true);
     this.mainRuleSet = null;
     this.inheritedRuleSets = [];
@@ -132,7 +134,7 @@ export class FolderRuleSetsService {
           this.currentFolder = nodeInfo;
           this.folderInfoSource.next(this.currentFolder);
         }),
-        switchMap(() => combineLatest(this.getMainRuleSet(nodeId), this.getInheritedRuleSets(nodeId))),
+        switchMap(() => combineLatest(this.getMainRuleSet(nodeId), loadInheritedRuleSets ? this.getInheritedRuleSets(nodeId) : of([]))),
         finalize(() => this.isLoadingSource.next(false))
       )
       .subscribe(([mainRuleSet, inheritedRuleSets]) => {
@@ -222,14 +224,29 @@ export class FolderRuleSetsService {
       }
       this.folderRulesService.selectRule(newRule);
     } else {
-      this.getMainRuleSet(this.currentFolder.id).subscribe((mainRuleSet: RuleSet) => {
+      this.refreshMainRuleSet(newRule);
-        this.mainRuleSet = mainRuleSet;
-        this.mainRuleSetSource.next(mainRuleSet);
-        if (mainRuleSet) {
-          const ruleToSelect = mainRuleSet.rules.find((rule: Rule) => rule.id === newRule.id);
-          this.folderRulesService.selectRule(ruleToSelect);
-        }
-      });
     }
   }
+
+  refreshMainRuleSet(ruleToSelect: Rule = null) {
+    this.getMainRuleSet(this.currentFolder.id).subscribe((mainRuleSet: RuleSet) => {
+      this.mainRuleSet = mainRuleSet;
+      this.mainRuleSetSource.next(mainRuleSet);
+      if (mainRuleSet) {
+        const ruleToSelectInRuleSet = ruleToSelect ? mainRuleSet.rules.find((rule: Rule) => rule.id === ruleToSelect.id) : mainRuleSet.rules[0];
+        this.folderRulesService.selectRule(ruleToSelectInRuleSet);
+      }
+    });
+  }
+
+  async createRuleSetLink(folderIdToCreateLink: string, folderIdToLinkFrom: string): Promise<unknown> {
+    const data = {
+      id: folderIdToLinkFrom
+    };
+    return this.callApi(`/nodes/${folderIdToCreateLink}/rule-set-links`, 'POST', data);
+  }
+
+  async deleteRuleSetLink(folderIdToDeleteLink: string, ruleSetIdToDelete: string): Promise<unknown> {
+    return this.callApi(`/nodes/${folderIdToDeleteLink}/rule-set-links/${ruleSetIdToDelete}`, 'DELETE');
+  }
 }