feat(portal): refactor to use dynamic portal navigation items and update related services

Author: dev-marek

gravitee-apim-portal-webui-next/src/app/app.component.spec.ts

@@ -16,12 +16,13 @@
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { Injectable } from '@angular/core';
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatButtonHarness } from '@angular/material/button/testing';
 
 import { AppComponent } from './app.component';
-import { PortalMenuLinksService } from '../services/portal-menu-links.service';
+import { PortalNavigationItem } from '../entities/portal-navigation/portal-navigation';
+import { PortalNavigationItemsService } from '../services/portal-navigation-items.service';
 import { AppTestingModule } from '../testing/app-testing.module';
 
 describe('AppComponent', () => {
@@ -45,37 +46,36 @@ describe('AppComponent', () => {
   });
 
   describe('custom links', () => {
-    @Injectable()
-    class PortalMenuLinksServiceStub {
-      links = () => [
+    beforeEach(async () => {
+      const mockItems: PortalNavigationItem[] = [
         {
-          id: 'link-id-1',
-          type: 'external',
-          name: 'link-name-1',
-          target: 'link-target-1',
-          order: 1,
+          id: 'l1',
+          organizationId: 'org1',
+          environmentId: 'env1',
+          title: 'link-name-1',
+          type: 'LINK',
+          area: 'TOP_NAVBAR',
+          order: 0,
+          url: '/link1',
         },
         {
-          id: 'link-id-2',
-          type: 'external',
-          name: 'link-name-2',
-          target: 'link-target-2',
-          order: 2,
+          id: 'l2',
+          organizationId: 'org1',
+          environmentId: 'env1',
+          title: 'link-name-2',
+          type: 'LINK',
+          area: 'TOP_NAVBAR',
+          order: 1,
+          url: '/link2',
         },
       ];
-    }
 
-    beforeEach(async () => {
       await TestBed.configureTestingModule({
         imports: [AppComponent, AppTestingModule],
-        providers: [
-          {
-            provide: PortalMenuLinksService,
-            useClass: PortalMenuLinksServiceStub,
-          },
-        ],
+        providers: [provideHttpClientTesting(), { provide: PortalNavigationItemsService, useValue: { topNavbar: signal(mockItems) } }],
       }).compileComponents();
       fixture = TestBed.createComponent(AppComponent);
+      fixture.detectChanges();
       harnessLoader = TestbedHarnessEnvironment.loader(fixture);
     });
     it('should show custom links', async () => {

gravitee-apim-portal-webui-next/src/app/app.component.ts

@@ -22,7 +22,7 @@ import { FooterComponent } from '../components/footer/footer.component';
 import { NavBarComponent } from '../components/nav-bar/nav-bar.component';
 import { ConfigService } from '../services/config.service';
 import { CurrentUserService } from '../services/current-user.service';
-import { PortalMenuLinksService } from '../services/portal-menu-links.service';
+import { PortalNavigationItemsService } from '../services/portal-navigation-items.service';
 import { ThemeService } from '../services/theme.service';
 
 @Component({
@@ -35,7 +35,7 @@ export class AppComponent {
   currentUser = inject(CurrentUserService).user;
   logo = inject(ThemeService).logo;
   favicon = inject(ThemeService).favicon;
-  customLinks = inject(PortalMenuLinksService).links;
+  customLinks = inject(PortalNavigationItemsService).topNavbar;
   private siteTitle: string;
 
   constructor(

gravitee-apim-portal-webui-next/src/app/app.config.ts

@@ -30,15 +30,15 @@ import { httpRequestInterceptor } from '../interceptors/http-request.interceptor
 import { AuthService } from '../services/auth.service';
 import { ConfigService } from '../services/config.service';
 import { CurrentUserService } from '../services/current-user.service';
-import { PortalMenuLinksService } from '../services/portal-menu-links.service';
+import { PortalNavigationItemsService } from '../services/portal-navigation-items.service';
 import { ThemeService } from '../services/theme.service';
 
 function initApp(
   authService: AuthService,
   configService: ConfigService,
   themeService: ThemeService,
   currentUserService: CurrentUserService,
-  portalMenuLinksService: PortalMenuLinksService,
+  portalNavigationItemsService: PortalNavigationItemsService,
   router: Router,
 ): () => Observable<unknown> {
   return () =>
@@ -47,7 +47,7 @@ function initApp(
         combineLatest([
           themeService.loadTheme(),
           configService.loadConfiguration(),
-          portalMenuLinksService.loadCustomLinks(),
+          portalNavigationItemsService.loadTopNavBarItems(),
           authService.load().pipe(switchMap(_ => currentUserService.loadUser())),
         ]),
       ),
@@ -70,7 +70,7 @@ export const appConfig: ApplicationConfig = {
         inject(ConfigService),
         inject(ThemeService),
         inject(CurrentUserService),
-        inject(PortalMenuLinksService),
+        inject(PortalNavigationItemsService),
         inject(Router),
       );
       return initializerFn();

gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts

@@ -33,7 +33,7 @@ import { AuthService } from '../../services/auth.service';
 import { ConfigService } from '../../services/config.service';
 import { CurrentUserService } from '../../services/current-user.service';
 import { IdentityProviderService } from '../../services/identity-provider.service';
-import { PortalMenuLinksService } from '../../services/portal-menu-links.service';
+import { PortalNavigationItemsService } from '../../services/portal-navigation-items.service';
 
 @Component({
   selector: 'app-log-in',
@@ -68,7 +68,7 @@ export class LogInComponent {
   constructor(
     private readonly authService: AuthService,
     private readonly currentUserService: CurrentUserService,
-    private readonly portalMenuLinksService: PortalMenuLinksService,
+    private readonly portalNavigationItemsService: PortalNavigationItemsService,
     private readonly router: Router,
     private readonly destroyRef: DestroyRef,
   ) {}
@@ -78,7 +78,7 @@ export class LogInComponent {
       .login(this.logInForm.value.username, this.logInForm.value.password)
       .pipe(
         switchMap(_ => this.currentUserService.loadUser()),
-        switchMap(_ => this.portalMenuLinksService.loadCustomLinks()),
+        switchMap(_ => this.portalNavigationItemsService.loadTopNavBarItems()),
         tap(_ => this.router.navigate([this.redirectUrl()])),
         takeUntilDestroyed(this.destroyRef),
       )

gravitee-apim-portal-webui-next/src/app/log-out/log-out.component.ts

@@ -20,7 +20,7 @@ import { switchMap, tap } from 'rxjs';
 
 import { AuthService } from '../../services/auth.service';
 import { CurrentUserService } from '../../services/current-user.service';
-import { PortalMenuLinksService } from '../../services/portal-menu-links.service';
+import { PortalNavigationItemsService } from '../../services/portal-navigation-items.service';
 
 @Component({
   selector: 'app-log-out',
@@ -33,7 +33,7 @@ export class LogOutComponent implements OnInit {
   constructor(
     private readonly authService: AuthService,
     private readonly currentUserService: CurrentUserService,
-    private readonly portalMenuLinksService: PortalMenuLinksService,
+    private readonly portalNavigationItemsService: PortalNavigationItemsService,
     private readonly router: Router,
   ) {}
 
@@ -43,7 +43,7 @@ export class LogOutComponent implements OnInit {
         .logout()
         .pipe(
           tap(_ => this.currentUserService.clear()),
-          switchMap(_ => this.portalMenuLinksService.loadCustomLinks()),
+          switchMap(_ => this.portalNavigationItemsService.loadTopNavBarItems()),
           tap(_ => this.router.navigate([''])),
           takeUntilDestroyed(this.destroyRef),
         )

gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html

@@ -19,14 +19,23 @@
   <app-nav-bar-button i18n="@@catalog" [path]="['catalog']">Catalog</app-nav-bar-button>
   <app-nav-bar-button i18n="@@guides" [path]="['guides']">Guides</app-nav-bar-button>
   @for (link of customLinks(); track link.id) {
-    <a
-      [href]="link.target"
-      mat-stroked-button
-      color="primary"
-      class="menu-items__custom_link"
-      [target]="link.type === 'external' ? '_blank' : ''">
-      {{ link.name }}
-    </a>
+    @switch (link.type) {
+      @case ('LINK') {
+        <a [href]="[link.url]" mat-stroked-button color="primary" class="menu-items__custom_link">
+          {{ link.title }}
+        </a>
+      }
+      @case ('PAGE') {
+        <a [routerLink]="['/page', link.portalPageContentId]" mat-stroked-button color="primary" class="menu-items__custom_link">
+          {{ link.title }}
+        </a>
+      }
+      @case ('FOLDER') {
+        <a [routerLink]="['/folder', link.id]" mat-stroked-button color="primary" class="menu-items__custom_link">
+          {{ link.title }}
+        </a>
+      }
+    }
   }
 </div>
 

gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts

@@ -18,8 +18,8 @@ import { MatAnchor, MatButton } from '@angular/material/button';
 import { RouterLink } from '@angular/router';
 import { isEmpty } from 'lodash';
 
+import { PortalNavigationItem } from '../../../entities/portal-navigation/portal-navigation';
 import { User } from '../../../entities/user/user';
-import { PortalMenuLink } from '../../../services/portal-menu-links.service';
 import { UserAvatarComponent } from '../../user-avatar/user-avatar.component';
 import { NavBarButtonComponent } from '../nav-bar-button/nav-bar-button.component';
 
@@ -31,7 +31,7 @@ import { NavBarButtonComponent } from '../nav-bar-button/nav-bar-button.componen
 })
 export class DesktopNavBarComponent {
   currentUser: InputSignal<User> = input({});
-  customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
+  customLinks: InputSignal<PortalNavigationItem[]> = input<PortalNavigationItem[]>([]);
   protected isLoggedIn = computed(() => {
     return !isEmpty(this.currentUser());
   });

gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html

@@ -38,9 +38,23 @@
     <a class="mobile-menu__link" i18n="@@catalog" [routerLink]="['catalog']" routerLinkActive="active" (click)="closeMenu()">Catalog</a>
     <a class="mobile-menu__link" i18n="@@guides" [routerLink]="['guides']" routerLinkActive="active" (click)="closeMenu()">Guides</a>
     @for (link of customLinks(); track link.id) {
-      <a class="mobile-menu__link" [href]="link.target" [attr.target]="link.type === 'external' ? '_blank' : null" (click)="closeMenu()">
-        {{ link.name }}
-      </a>
+      @switch (link.type) {
+        @case ('PAGE') {
+          <a class="mobile-menu__link" [routerLink]="['/page', link.portalPageContentId]" routerLinkActive="active" (click)="closeMenu()">
+            {{ link.title }}
+          </a>
+        }
+        @case ('FOLDER') {
+          <a class="mobile-menu__link" [routerLink]="['/folder', link.id]" routerLinkActive="active" (click)="closeMenu()">
+            {{ link.title }}
+          </a>
+        }
+        @case ('LINK') {
+          <a class="mobile-menu__link" [href]="link.url" [attr.target]="'_blank'" (click)="closeMenu()">
+            {{ link.title }}
+          </a>
+        }
+      }
     }
     <div class="mobile-menu__hr"></div>
 

gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts

@@ -22,8 +22,8 @@ import { isEmpty } from 'lodash';
 import { catchError, map } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
 
+import { PortalNavigationItem } from '../../../entities/portal-navigation/portal-navigation';
 import { User } from '../../../entities/user/user';
-import { PortalMenuLink } from '../../../services/portal-menu-links.service';
 import { PortalService } from '../../../services/portal.service';
 
 @Component({
@@ -34,7 +34,7 @@ import { PortalService } from '../../../services/portal.service';
 })
 export class MobileNavBarComponent {
   currentUser: InputSignal<User> = input({});
-  customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
+  customLinks: InputSignal<PortalNavigationItem[]> = input<PortalNavigationItem[]>([]);
   hasHomepage = toSignal(
     inject(PortalService)
       .getPortalHomepages()

gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts

@@ -17,9 +17,9 @@ import { Component, computed, inject, input, InputSignal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { isEmpty } from 'lodash';
 
+import { PortalNavigationItem } from '../../entities/portal-navigation/portal-navigation';
 import { User } from '../../entities/user/user';
 import { ObservabilityBreakpointService } from '../../services/observability-breakpoint.service';
-import { PortalMenuLink } from '../../services/portal-menu-links.service';
 import { CompanyTitleComponent } from '../company-title/company-title.component';
 import { DesktopNavBarComponent } from './desktop-nav-bar/desktop-nav-bar.component';
 import { MobileNavBarComponent } from './mobile-nav-bar/mobile-nav-bar.component';
@@ -31,7 +31,7 @@ import { MobileNavBarComponent } from './mobile-nav-bar/mobile-nav-bar.component
   styleUrls: ['./nav-bar.component.scss'],
 })
 export class NavBarComponent {
-  customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
+  customLinks: InputSignal<PortalNavigationItem[]> = input<PortalNavigationItem[]>([]);
   currentUser: InputSignal<User> = input({});
   forceLogin: InputSignal<boolean> = input(false);
   logo: InputSignal<string> = input('');