Navigation Node visibility with custom nodeAccessibilityResolver

core/examples/luigi-sample-angular/src/app/app-routing.module.ts

@@ -13,9 +13,11 @@ import { Miscellaneous2Component } from './project/miscellaneous2/miscellaneous2
 import { ChildNode2Component } from './project/default-child/dps2/child-node-2.component';
 import { ChildNode1Component } from './project/default-child/dps1/child-node-1.component';
 import { OverviewComponent } from './overview/overview.component';
+import { RestrictedComponent } from './restricted/restricted.component';
 
 const routes: Routes = [
   { path: 'overview', component: OverviewComponent },
+  { path: 'restricted', component: RestrictedComponent },
   { path: 'projects/:projectId', component: ProjectComponent },
   { path: 'projects/:projectId/users', component: UsersComponent },
   {

core/examples/luigi-sample-angular/src/app/app.module.ts

@@ -20,6 +20,7 @@ import { CodeSnippetComponent } from './project/code-snippet/code-snippet.compon
 import { ChildNode1Component } from './project/default-child/dps1/child-node-1.component';
 import { ChildNode2Component } from './project/default-child/dps2/child-node-2.component';
 import { OverviewComponent } from './overview/overview.component';
+import { RestrictedComponent } from './restricted/restricted.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,8 @@ import { OverviewComponent } from './overview/overview.component';
     CodeSnippetComponent,
     ChildNode1Component,
     ChildNode2Component,
-    OverviewComponent
+    OverviewComponent,
+    RestrictedComponent
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule],
   providers: [],

core/examples/luigi-sample-angular/src/app/restricted/restricted.component.html

@@ -0,0 +1,10 @@
+<header class="fd-page__header">
+  <div class="fd-action-bar">
+    <div class="fd-action-bar__header">
+      <h1 class="fd-action-bar__title">
+          Restricted Area
+      </h1>
+      <p class="fd-action-bar__description">This page is visible to you.</p>
+    </div>
+  </div>
+</header>

core/examples/luigi-sample-angular/src/app/restricted/restricted.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RestrictedComponent } from './restricted.component';
+
+describe('RestrictedComponent', () => {
+  let component: RestrictedComponent;
+  let fixture: ComponentFixture<RestrictedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RestrictedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RestrictedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

core/examples/luigi-sample-angular/src/app/restricted/restricted.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-restricted',
+  templateUrl: './restricted.component.html',
+  styleUrls: ['./restricted.component.css']
+})
+export class RestrictedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

core/examples/luigi-sample-angular/src/assets/sampleconfig.js

@@ -1,5 +1,21 @@
-var getAllProjects = function() {
-  return new Promise(function(resolve) {
+var navigationPermissionChecker = function (nodeToCheckPermissionFor, parentNode, currentContext) {
+  // depending on the current path and context returns true or false
+  // true means the current node is accessible, false the opposite
+  const mockCurrentUserGroups = ['admins'];
+  if (nodeToCheckPermissionFor.constraints) {
+    // check if user has required groups
+    return nodeToCheckPermissionFor.constraints.filter(
+      function (c) {
+        return mockCurrentUserGroups.indexOf(c) !== -1;
+      }
+    ).length !== 0;
+  }
+
+  return true;
+};
+
+var getAllProjects = function () {
+  return new Promise(function (resolve) {
     resolve([
       {
         id: 'pr1',
@@ -13,8 +29,8 @@ var getAllProjects = function() {
   });
 };
 
-var getProjectPlugins = function(projectId) {
-  return new Promise(function(resolve) {
+var getProjectPlugins = function (projectId) {
+  return new Promise(function (resolve) {
     if (projectId === 'pr2') {
       resolve([
         {
@@ -52,8 +68,8 @@ var getProjectPlugins = function(projectId) {
   });
 };
 
-var projectDetailNavProviderFn = function(context) {
-  return new Promise(function(resolve) {
+var projectDetailNavProviderFn = function (context) {
+  return new Promise(function (resolve) {
     var projectId = context.currentProject;
     var children = [
       {
@@ -108,6 +124,7 @@ var projectDetailNavProviderFn = function(context) {
       },
       {
         pathSegment: 'miscellaneous',
+        constraints: ['unicorns'],
         label: 'Miscellaneous',
         viewUrl: '/sampleapp.html#/projects/' + projectId + '/miscellaneous'
       },
@@ -155,8 +172,8 @@ var projectDetailNavProviderFn = function(context) {
   });
 };
 
-var projectsNavProviderFn = function(context) {
-  return new Promise(function(resolve) {
+var projectsNavProviderFn = function (context) {
+  return new Promise(function (resolve) {
     getAllProjects().then(result => {
       var children = [];
       result.forEach(project => {
@@ -270,6 +287,7 @@ Luigi.setConfig({
     }
   },
   navigation: {
+    nodeAccessibilityResolver: navigationPermissionChecker,
     nodes: () => [
       {
         pathSegment: 'overview',
@@ -288,6 +306,12 @@ Luigi.setConfig({
         label: 'Hidden',
         viewUrl: '/sampleapp.html#/projects/overview'
       },
+      {
+        pathSegment: 'forbidden-sample',
+        label: 'Forbidden',
+        viewUrl: '/sampleapp.html#/restricted',
+        constraints: ['unicorns']
+      },
       {
         pathSegment: 'ext',
         label: 'External Page',