Add ability to remove elements from console UI per user role (#2495)

console-webapp/src/app/navigation/navigation.component.html

@@ -8,6 +8,7 @@
     matTreeNodeToggle
     (click)="onClick(node)"
     [class.active]="router.url.includes(node.path)"
+    [elementId]="getElementId(node)"
   >
     <mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
       {{ node.iconName }}

console-webapp/src/app/navigation/navigation.component.ts

@@ -18,6 +18,7 @@ import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { RouteWithIcon, routes } from '../app-routing.module';
+import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
 
 interface NavMenuNode extends RouteWithIcon {
   parentRoute?: RouteWithIcon;
@@ -37,6 +38,7 @@ export class NavigationComponent {
   treeControl = new NestedTreeControl<RouteWithIcon>((node) => node.children);
   dataSource = new MatTreeNestedDataSource<RouteWithIcon>();
   private subscription!: Subscription;
+
   hasChild = (_: number, node: RouteWithIcon) =>
     !!node.children && node.children.length > 0;
 
@@ -56,6 +58,12 @@ export class NavigationComponent {
     this.subscription.unsubscribe();
   }
 
+  getElementId(node: RouteWithIcon) {
+    return node.path === 'registrars'
+      ? RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT
+      : null;
+  }
+
   syncExpandedNavigationWithRoute(url: string) {
     const maybeComponentWithChildren = this.dataSource.data.find((menuNode) => {
       return (