feat: enhance enterprise module directive to support dynamic menu names and icons

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/app-management/layout/app-management-sidebar/app-management-sidebar.component.html

@@ -125,19 +125,22 @@
       </span>
     </a>
 
-    <a *appHasAnyAuthority="adminAuth"
+    <ng-container *appHasAnyAuthority="adminAuth">
+
+      <a *appIsEnterpriseModule="'AUTH_WITH_PROVIDERS_MODULE', else community; menuName: 'API Keys'; cssIcon: 'icon-key'"
        class="list-group-item"
        routerLink="/app-management/settings/api-keys"
        routerLinkActive="router-link-active">
           <span class="font-weight-semibold">
              <i class="icon-key font-size-sm"></i>&nbsp;
             API Keys
           </span>
-    </a>
+      </a>
+    </ng-container>
 
     <ng-container *appHasAnyAuthority="adminAuth">
 
-      <a *appIsEnterpriseModule="'AUTH_WITH_PROVIDERS_MODULE', else community"
+      <a *appIsEnterpriseModule="'AUTH_WITH_PROVIDERS_MODULE', else community; menuName: 'Identity Providers'; cssIcon: 'icon-shield-check'"
          class="list-group-item"
          routerLink="/app-management/settings/providers"
          routerLinkActive="router-link-active">
@@ -147,17 +150,6 @@
           </span>
       </a>
 
-      <ng-template #community>
-        <a
-          (click)="modalVersionInfoService.showVersionInfo()"
-          class="list-group-item">
-          <span class="font-weight-semibold">
-             <i class="icon-shield-check font-size-sm"></i>&nbsp;
-            Identity Providers
-          </span>
-        </a>
-      </ng-template>
-
     </ng-container>
 
 
@@ -173,3 +165,20 @@
     </a>
   </div>
 </div>
+
+<ng-template #community let-menuName="menuName" let-cssIcon="cssIcon">
+  <a (click)="modalVersionInfoService.showVersionInfo()"
+     class="list-group-item cursor-pointer position-relative">
+    <div class="d-flex align-items-flex-start justify-content-between">
+      <div class="d-flex align-items-center">
+        <i class="icon-lock2 font-size-sm mr-2" aria-hidden="true"></i>
+        <span class="font-weight-semibold">
+          {{ menuName }}
+        </span>
+      </div>
+    </div>
+  </a>
+</ng-template>
+
+
+

frontend/src/app/shared/directives/enterprise/enterprise.directive.ts

@@ -1,14 +1,16 @@
-import {Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import { Directive, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import {EnterpriseFeatures, VersionInfoService, VersionType} from 'src/app/shared/services/version/version-info.service';
+import { EnterpriseFeatures, VersionInfoService, VersionType } from 'src/app/shared/services/version/version-info.service';
 
 @Directive({
   selector: '[appIsEnterpriseModule]'
 })
 export class IsEnterpriseModuleDirective implements OnInit, OnDestroy {
   @Input('appIsEnterpriseModule') module: string;
   @Input('appIsEnterpriseModuleElse') elseTpl: TemplateRef<any> | null = null;
+  @Input('appIsEnterpriseModuleMenuName') menuName = '';
+  @Input('appIsEnterpriseModuleCssIcon') cssIcon: string = '';
 
   private destroy$ = new Subject<void>();
 
@@ -21,15 +23,27 @@ export class IsEnterpriseModuleDirective implements OnInit, OnDestroy {
   ngOnInit() {
     this.versionTypeService.versionType$
       .pipe(takeUntil(this.destroy$))
-      .subscribe(versionType => {
-        if (versionType === VersionType.ENTERPRISE && EnterpriseFeatures.includes(this.module)) {
-          this.vcr.createEmbeddedView(this.tpl);
-        } else if (this.elseTpl) {
-          this.vcr.createEmbeddedView(this.elseTpl);
-        } else {
-          this.vcr.clear();
-        }
-      });
+      .subscribe(versionType => this.render(versionType));
+  }
+
+  private render(versionType: VersionType) {
+    this.vcr.clear();
+
+    const context = {
+      $implicit: this.menuName,
+      menuName: this.menuName,
+      cssIcon: this.cssIcon
+    };
+
+    if (versionType === VersionType.ENTERPRISE && EnterpriseFeatures.includes(this.module)) {
+      const viewRef = this.vcr.createEmbeddedView(this.tpl, context);
+      viewRef.detectChanges();
+    } else if (this.elseTpl) {
+      const viewRef = this.vcr.createEmbeddedView(this.elseTpl, context);
+      viewRef.detectChanges();
+    } else {
+
+    }
   }
 
   ngOnDestroy() {