navigation json config schema (#127)

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

@@ -53,11 +53,12 @@
             <li class="sidenav-menu__item" *ngFor="let item of list">
                 <a
                     class="sidenav-menu__item-link"
+                    [ngClass]="{ 'sidenav-menu__item-link--noicon' : !item.icon }"
                     routerLinkActive="sidenav-menu__item-link--active"
                     [routerLink]="item.disabled? null : item.route.url"
                     [ngClass]="{ 'disabled': item.disabled }"
                     title="{{ item.title || '' | translate }}">
-                    <mat-icon>{{ item.icon }}</mat-icon>
+                    <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
                     {{ item.label | translate }}
                 </a>
             </li>

src/app/components/sidenav/sidenav.component.scss

@@ -14,6 +14,10 @@ $sidenav-menu-item--icon-size: 24px;
         flex: 1;
         flex-direction: column;
 
+        &__section:last-child {
+            border-bottom: 0;
+        }
+
         &__section {
             padding:
                 $sidenav-section--v-padding
@@ -70,6 +74,10 @@ $sidenav-menu-item--icon-size: 24px;
                         color: $alfresco-secondary-text-color !important;
                         opacity: .25;
                     }
+
+                    &--noicon {
+                        padding-left: 26px;
+                    }
                 }
             }
         }

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

@@ -17,8 +17,7 @@
 
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ContentService } from '@alfresco/adf-core';
+import { ContentService, AppConfigService } from '@alfresco/adf-core';
-
 import { BrowsingFilesService } from '../../common/services/browsing-files.service';
 
 import { SidenavComponent } from './sidenav.component';
@@ -29,6 +28,15 @@ describe('SidenavComponent', () => {
     let component: SidenavComponent;
     let contentService: ContentService;
     let browsingService: BrowsingFilesService;
+    let appConfig: AppConfigService;
+    let appConfigSpy;
+
+    const navItem = {
+        label: 'some-label',
+        route: {
+            url: '/some-url'
+        }
+    };
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -44,15 +52,17 @@ describe('SidenavComponent', () => {
         .then(() => {
             contentService = TestBed.get(ContentService);
             browsingService = TestBed.get(BrowsingFilesService);
+            appConfig = TestBed.get(AppConfigService);
 
             fixture = TestBed.createComponent(SidenavComponent);
             component = fixture.componentInstance;
 
-            fixture.detectChanges();
+            appConfigSpy = spyOn(appConfig, 'get').and.returnValue([navItem]);
         });
     }));
 
-    it('updates node on change', () => {
+    it('should update node on change', () => {
+        fixture.detectChanges();
         const node: any = { entry: { id: 'someNodeId' } };
 
         browsingService.onChangeParent.next(<any>node);
@@ -60,7 +70,8 @@ describe('SidenavComponent', () => {
         expect(component.node).toBe(node);
     });
 
-    it('can create content', () => {
+    it('should have permission to create content', () => {
+        fixture.detectChanges();
         spyOn(contentService, 'hasPermission').and.returnValue(true);
         const node: any = {};
 
@@ -68,18 +79,36 @@ describe('SidenavComponent', () => {
         expect(contentService.hasPermission).toHaveBeenCalledWith(node, 'create');
     });
 
-    it('cannot create content for missing node', () => {
+    it('should not have permission to create content for missing node', () => {
+        fixture.detectChanges();
         spyOn(contentService, 'hasPermission').and.returnValue(true);
 
         expect(component.canCreateContent(null)).toBe(false);
         expect(contentService.hasPermission).not.toHaveBeenCalled();
     });
 
-    it('cannot create content based on permission', () => {
+    it('should not have permission to create content based on node permission', () => {
+        fixture.detectChanges();
         spyOn(contentService, 'hasPermission').and.returnValue(false);
         const node: any = {};
 
         expect(component.canCreateContent(node)).toBe(false);
         expect(contentService.hasPermission).toHaveBeenCalledWith(node, 'create');
     });
+
+    describe('menu', () => {
+        it('should build menu from array', () => {
+            appConfigSpy.and.returnValue([navItem, navItem]);
+            fixture.detectChanges();
+
+            expect(component.navigation).toEqual([[navItem, navItem]]);
+        });
+
+        it('should build menu from object', () => {
+            appConfigSpy.and.returnValue({ a: [navItem, navItem], b: [navItem, navItem] });
+            fixture.detectChanges();
+
+            expect(component.navigation).toEqual([[navItem, navItem], [navItem, navItem]]);
+        });
+    });
 });

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

@@ -39,14 +39,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
         private browsingFilesService: BrowsingFilesService,
         private contentService: ContentService,
         private appConfig: AppConfigService
-    ) {
+    ) {}
-        this.navigation = this.navigation.concat([
-            this.appConfig.get('navigation.main'),
-            this.appConfig.get('navigation.secondary')
-        ]);
-    }
 
     ngOnInit() {
+        this.navigation = this.buildMenu();
+
         this.subscriptions.concat([
             this.browsingFilesService.onChangeParent
                 .subscribe((node: MinimalNodeEntryEntity) => this.node = node)
@@ -63,4 +60,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
         }
         return false;
     }
+
+    private buildMenu() {
+        const schema = this.appConfig.get('navigation');
+        const data = Array.isArray(schema) ? { main: schema } : schema;
+
+        return Object.keys(data).map((key) => data[key]);
+    }
 }