[ACA-2746] Side Navigation - conditionally render group of items (#1197)

* filter groups based on rule

* test

* update docs

docs/getting-started/navigation.md

@@ -208,6 +208,34 @@ Navigation definition also supports custom components to be dynamically render.
 ]
 ```
 
+Navigation items or group of navigation items can be conditional render based on defined rules.
+
+```json
+"navbar": [
+  {
+    "id": "custom-group-1",
+    "rules": {
+      "visible": "rule-reference-id"
+    },
+    "items": [ ... ]
+  },
+  {
+    "id": "custom-group-2",
+    "items": [
+        {
+          "id": "itemId",
+          "rules": {
+            "visible": "rule-reference-id"
+          },
+          ...
+        }
+    ]
+  }
+]
+```
+
+For more informations about rules checkout [Rules](../extending/rules.md) section.
+
 Note that components must be declared as entryComponents under the app module.
 
 For more information about the content of a custom page see [Document List Layout](/features/document-list-layout) section.

src/app/extensions/extension.service.spec.ts

@@ -694,6 +694,62 @@ describe('AppExtensionService', () => {
         { items: [{ children: [] }] }
       ]);
     });
+
+    it('should filter out items based on rule', () => {
+      spyOn(service, 'filterVisible').and.callFake(item => {
+        if (item.rules) {
+          return item.rules.visible;
+        } else {
+          return true;
+        }
+      });
+
+      const navigation = service.getApplicationNavigation([
+        {
+          id: 'groupId',
+          items: [
+            {
+              id: 'itemId',
+              route: 'route1',
+              rules: { visible: false }
+            }
+          ]
+        }
+      ]);
+
+      expect(navigation).toEqual([{ id: 'groupId', items: [] }]);
+    });
+
+    it('should filter out group based on rule', () => {
+      spyOn(service, 'filterVisible').and.callFake(item => {
+        if (item.rules) {
+          return item.rules.visible;
+        } else {
+          return true;
+        }
+      });
+
+      const navigation = service.getApplicationNavigation([
+        {
+          id: 'group1',
+          rules: {
+            visible: false
+          },
+          items: [
+            {
+              id: 'item1',
+              route: 'route1'
+            }
+          ]
+        },
+        {
+          id: 'group2',
+          items: []
+        }
+      ]);
+
+      expect(navigation).toEqual([{ id: 'group2', items: [] }]);
+    });
   });
 
   describe('getSharedLinkViewerToolbarActions', () => {

src/app/extensions/extension.service.ts

@@ -235,71 +235,73 @@ export class AppExtensionService implements RuleContext {
   }
 
   getApplicationNavigation(elements) {
-    return elements.map(group => {
+    return elements
-      return {
+      .filter(group => this.filterVisible(group))
-        ...group,
+      .map(group => {
-        items: (group.items || [])
+        return {
-          .filter(entry => !entry.disabled)
+          ...group,
-          .filter(item => this.filterVisible(item))
+          items: (group.items || [])
-          .sort(sortByOrder)
+            .filter(entry => !entry.disabled)
-          .map(item => {
+            .filter(item => this.filterVisible(item))
-            if (item.children && item.children.length > 0) {
+            .sort(sortByOrder)
-              item.children = item.children
+            .map(item => {
-                .filter(entry => !entry.disabled)
+              if (item.children && item.children.length > 0) {
-                .filter(child => this.filterVisible(child))
+                item.children = item.children
-                .sort(sortByOrder)
+                  .filter(entry => !entry.disabled)
-                .map(child => {
+                  .filter(child => this.filterVisible(child))
-                  if (child.component) {
+                  .sort(sortByOrder)
-                    return {
+                  .map(child => {
-                      ...child
+                    if (child.component) {
-                    };
+                      return {
-                  }
+                        ...child
+                      };
+                    }
+
+                    if (!child.click) {
+                      const childRouteRef = this.extensions.getRouteById(
+                        child.route
+                      );
+                      const childUrl = `/${
+                        childRouteRef ? childRouteRef.path : child.route
+                      }`;
+                      return {
+                        ...child,
+                        url: childUrl
+                      };
+                    }
 
-                  if (!child.click) {
-                    const childRouteRef = this.extensions.getRouteById(
-                      child.route
-                    );
-                    const childUrl = `/${
-                      childRouteRef ? childRouteRef.path : child.route
-                    }`;
                     return {
                       ...child,
-                      url: childUrl
+                      action: child.click
                     };
-                  }
+                  });
 
-                  return {
+                return {
-                    ...child,
+                  ...item
-                    action: child.click
+                };
-                  };
+              }
-                });
 
-              return {
+              if (item.component) {
-                ...item
+                return { ...item };
-              };
+              }
-            }
 
-            if (item.component) {
+              if (!item.click) {
-              return { ...item };
+                const routeRef = this.extensions.getRouteById(item.route);
-            }
+                const url = `/${routeRef ? routeRef.path : item.route}`;
+                return {
+                  ...item,
+                  url
+                };
+              }
 
-            if (!item.click) {
-              const routeRef = this.extensions.getRouteById(item.route);
-              const url = `/${routeRef ? routeRef.path : item.route}`;
               return {
                 ...item,
-                url
+                action: item.click
               };
-            }
+            })
-
+            .reduce(reduceEmptyMenus, [])
-            return {
+        };
-              ...item,
+      });
-              action: item.click
-            };
-          })
-          .reduce(reduceEmptyMenus, [])
-      };
-    });
   }
 
   loadContentMetadata(config: ExtensionConfig): any {