[ACA-2322] Sidenav - support dynamic components (#1066)

* dynamic components support

* subscribe to sidenav selector

* update module for extension

* sidenav selector

* support dynamic components definistion

* update docs

* stabilise tests

* Update src/app/components/sidenav/sidenav.module.ts

Co-Authored-By: pionnegru <pionnegru@users.noreply.github.com>

* Update src/app/components/sidenav/sidenav.module.ts

Co-Authored-By: pionnegru <pionnegru@users.noreply.github.com>

* rename selector

src/app/components/sidenav/sidenav.component.html

@@ -14,14 +14,24 @@
           <ng-container *ngIf="expandedTemplate">
             <ng-template
               [ngTemplateOutlet]="expandedTemplate"
-              [ngTemplateOutletContext]="{ $implicit: item }"
+              [ngTemplateOutletContext]="{
+                $implicit: item,
+                state: 'expanded'
+              }"
             >
             </ng-template>
           </ng-container>
 
-          <ng-container *ngIf="!expandedTemplate">
+          <ng-container *ngIf="!item.component">
             <app-expand-menu [item]="item"></app-expand-menu>
           </ng-container>
+
+          <ng-container *ngIf="item.component">
+            <adf-dynamic-component
+              [data]="{ item: item, state: 'expanded' }"
+              [id]="item.component"
+            ></adf-dynamic-component>
+          </ng-container>
         </mat-list-item>
       </ng-container>
 
@@ -33,14 +43,25 @@
           <ng-container *ngIf="collapsedTemplate">
             <ng-template
               [ngTemplateOutlet]="collapsedTemplate"
-              [ngTemplateOutletContext]="{ $implicit: item }"
+              [ngTemplateOutletContext]="{
+                $implicit: item,
+                state: 'collapsed'
+              }"
             >
             </ng-template>
           </ng-container>
 
-          <ng-container *ngIf="!collapsedTemplate">
+          <ng-container *ngIf="!item.component">
             <app-button-menu [item]="item"></app-button-menu>
           </ng-container>
+
+          <ng-container *ngIf="item.component">
+            <adf-dynamic-component
+              [data]="{ item: item, state: 'collapsed' }"
+              [id]="item.component"
+            >
+            </adf-dynamic-component>
+          </ng-container>
         </div>
       </ng-container>
     </div>

src/app/components/sidenav/sidenav.component.ts

@@ -38,9 +38,9 @@ import { AppExtensionService } from '../../extensions/extension.service';
 import { NavBarGroupRef } from '@alfresco/adf-extensions';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states';
-import { ruleContext } from '../../store/selectors/app.selectors';
+import { sidenavState } from '../../store/selectors/app.selectors';
 import { Subject } from 'rxjs';
-import { takeUntil, distinctUntilChanged, map } from 'rxjs/operators';
+import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 
 @Component({
   selector: 'app-sidenav',
@@ -68,9 +68,9 @@ export class SidenavComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.store
-      .select(ruleContext)
+      .select(sidenavState)
       .pipe(
-        map(rules => rules.repository),
+        debounceTime(300),
         distinctUntilChanged(),
         takeUntil(this.onDestroy$)
       )

src/app/components/sidenav/sidenav.module.ts

@@ -28,6 +28,8 @@ import { AppCreateMenuModule } from '../create-menu/create-menu.module';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
 import { RouterModule } from '@angular/router';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { CoreExtensionsModule } from '../../extensions/core.extensions.module';
 import { ExpansionPanelDirective } from './directives/expansion-panel.directive';
 import { MenuPanelDirective } from './directives/menu-panel.directive';
 import { CollapsedTemplateDirective } from './directives/collapsed-template.directive';
@@ -41,6 +43,8 @@ import { ActionDirective } from './directives/action.directive';
   imports: [
     CommonModule,
     CoreModule.forChild(),
+    CoreExtensionsModule.forChild(),
+    ExtensionsModule.forChild(),
     RouterModule,
     AppCreateMenuModule
   ],

src/app/extensions/extension.service.ts

@@ -244,6 +244,12 @@ export class AppExtensionService implements RuleContext {
                 .filter(child => this.filterVisible(child))
                 .sort(sortByOrder)
                 .map(child => {
+                  if (child.component) {
+                    return {
+                      ...child
+                    };
+                  }
+
                   if (!child.click) {
                     const childRouteRef = this.extensions.getRouteById(
                       child.route
@@ -268,6 +274,10 @@ export class AppExtensionService implements RuleContext {
               };
             }
 
+            if (item.component) {
+              return { ...item };
+            }
+
             if (!item.click) {
               const routeRef = this.extensions.getRouteById(item.route);
               const url = `/${routeRef ? routeRef.path : item.route}`;

src/app/store/selectors/app.selectors.ts

@@ -103,6 +103,17 @@ export const isAdmin = createSelector(
   state => state.user.isAdmin
 );
 
+export const sidenavState = createSelector(
+  appSelection,
+  appNavigation,
+  (selection, navigation) => {
+    return {
+      selection,
+      navigation
+    };
+  }
+);
+
 export const ruleContext = createSelector(
   appSelection,
   appNavigation,