feat: luigi static settings config api (#2)

* feat: extract luigi static settings configuration api

Author: gkrajniak

jest.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   preset: 'jest-preset-angular',
   testRunner: 'jest-jasmine2',
+  moduleNameMapper: {
+    '^lodash-es(.*)': 'lodash',
+  },
   collectCoverage: true,
   coveragePathIgnorePatterns: ['/node_modules/', '/integration-tests/'],
 };

package-lock.json

@@ -25,6 +25,8 @@
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "@luigi-project/plugin-auth-oauth2": "2.7.5",
+    "@luigi-project/client": "2.14.1",
+    "@luigi-project/client-support-angular": "2.14.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -40,6 +42,8 @@
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.0",
     "@briebug/jest-schematic": "^6.0.0",
+    "@luigi-project/client": "2.14.1",
+    "@luigi-project/client-support-angular": "2.14.1",
     "@openmfp/config-prettier": "0.5.0",
     "@openmfp/eslint-config-typescript": "0.6.0",
     "@types/jest": "29.5.12",

package.json

@@ -1,6 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
-// @ts-ignore
 import * as url from 'url';
 import { AuthService } from '../services';
 

src/lib/callback/callback.component.ts

@@ -0,0 +1,2 @@
+export const LUIGI_STATIC_SETTINGS_CONFIG_SERVICE_INJECTION_TOKEN =
+  'OPENMFP_LUIGI_STATIC_SETTINGS_CONFIG_SERVICE';

src/lib/injection-tokens.ts

@@ -1,12 +1,22 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Type } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterOutlet } from '@angular/router';
+import { LUIGI_STATIC_SETTINGS_CONFIG_SERVICE_INJECTION_TOKEN } from './injection-tokens';
 import { LogoutComponent } from './logout/logout.component';
 import { LuigiComponent } from './luigi/luigi.component';
 import { CallbackComponent } from './callback/callback.component';
 import { PortalRoutingModule } from './portal-routing.module';
 import { PortalComponent } from './portal.component';
+import {
+  StaticSettingsConfigService,
+  StaticSettingsConfigServiceImpl,
+} from './services/luigi-config/static-settings-config.service';
+
+export interface PortalModuleOptions {
+  /** Service containing and providing the luigi settings configuration **/
+  staticSettingsConfigService?: Type<StaticSettingsConfigService>;
+}
 
 @NgModule({
   declarations: [
@@ -15,8 +25,41 @@ import { PortalComponent } from './portal.component';
     CallbackComponent,
     LogoutComponent,
   ],
+  providers: [
+    {
+      provide: LUIGI_STATIC_SETTINGS_CONFIG_SERVICE_INJECTION_TOKEN,
+      useClass: StaticSettingsConfigServiceImpl,
+    },
+  ],
   imports: [PortalRoutingModule, BrowserModule, RouterOutlet, HttpClientModule],
   exports: [PortalComponent],
   bootstrap: [PortalComponent],
 })
-export class PortalModule {}
+export class PortalModule {
+  static create(options: PortalModuleOptions): NgModule {
+    return {
+      declarations: [
+        LuigiComponent,
+        PortalComponent,
+        CallbackComponent,
+        LogoutComponent,
+      ],
+      providers: [
+        {
+          provide: LUIGI_STATIC_SETTINGS_CONFIG_SERVICE_INJECTION_TOKEN,
+          useClass:
+            options.staticSettingsConfigService ||
+            StaticSettingsConfigServiceImpl,
+        },
+      ],
+      imports: [
+        PortalRoutingModule,
+        BrowserModule,
+        RouterOutlet,
+        HttpClientModule,
+      ],
+      exports: [PortalComponent],
+      bootstrap: [PortalComponent],
+    };
+  }
+}

src/lib/portal.module.ts

@@ -67,7 +67,6 @@ export class I18nService {
       let result = this.getInternalTranslation(key, interpolations, locale);
       // fallback language
       if (!result) {
-        // @ts-ignore
         if (
           this.translationTable &&
           !this.translationTable[this.fallbackLanguage]
@@ -153,7 +152,6 @@ export class I18nService {
    */
   addTranslationFile(locale: string, data: Record<string, string>) {
     if (data && locale) {
-      // @ts-ignore
       this.translationTable[locale] = data;
     }
   }

src/lib/services/i18n.service.ts

@@ -1,2 +1,3 @@
 export * from './auth.service';
 export * from './luigi-core.service';
+export * from './luigi-config/luigi-config.service';

src/lib/services/index.ts

@@ -2,7 +2,6 @@ import { AuthConfigService } from './auth-config.service';
 import { AuthService } from '../auth.service';
 import { StorageService } from '../storage.service';
 import { LuigiCoreService } from '../luigi-core.service';
-// @ts-ignore
 import oAuth2 from '@luigi-project/plugin-auth-oauth2';
 
 jest.mock('@luigi-project/plugin-auth-oauth2');

src/lib/services/luigi-config/auth-config.service.spec.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { AuthService } from '../auth.service';
-// @ts-ignore
 import oAuth2 from '@luigi-project/plugin-auth-oauth2';
 import { LuigiCoreService } from '../luigi-core.service';
 import { StorageService } from '../storage.service';

src/lib/services/luigi-config/auth-config.service.ts

@@ -2,11 +2,13 @@ import { LuigiConfigService } from './luigi-config.service';
 import { EnvConfigService } from '../env-config.service';
 import { AuthConfigService } from './auth-config.service';
 import { ClientEnvironment } from '../../model/env';
+import { StaticSettingsConfigService } from './static-settings-config.service';
 
 describe('LuigiConfigService', () => {
   let service: LuigiConfigService;
   let envConfigServiceMock: jest.Mocked<EnvConfigService>;
   let authConfigServiceMock: jest.Mocked<AuthConfigService>;
+  let staticSettingsConfigServiceMock: jest.Mocked<StaticSettingsConfigService>;
 
   beforeEach(() => {
     envConfigServiceMock = {
@@ -17,9 +19,14 @@ describe('LuigiConfigService', () => {
       getAuthConfig: jest.fn(),
     } as any;
 
+    staticSettingsConfigServiceMock = {
+      getInitialStaticSettingsConfig: jest.fn(),
+    } as any;
+
     service = new LuigiConfigService(
       envConfigServiceMock,
-      authConfigServiceMock
+      authConfigServiceMock,
+      staticSettingsConfigServiceMock
     );
   });
 
@@ -38,12 +45,22 @@ describe('LuigiConfigService', () => {
         use: 'oAuth2AuthCode',
       } as any;
 
+      const mockStaticSettings = {
+        filed: 'filed',
+      };
+
       envConfigServiceMock.getEnvConfig.mockResolvedValue(mockEnvConfig);
       authConfigServiceMock.getAuthConfig.mockReturnValue(mockAuthConfig);
+      staticSettingsConfigServiceMock.getInitialStaticSettingsConfig.mockReturnValue(
+        mockStaticSettings
+      );
 
       const config = await service.getLuigiConfiguration();
 
       expect(envConfigServiceMock.getEnvConfig).toHaveBeenCalled();
+      expect(
+        staticSettingsConfigServiceMock.getInitialStaticSettingsConfig
+      ).toHaveBeenCalled();
       expect(authConfigServiceMock.getAuthConfig).toHaveBeenCalledWith(
         mockEnvConfig.oauthServerUrl,
         mockEnvConfig.clientId
@@ -52,7 +69,7 @@ describe('LuigiConfigService', () => {
       expect(config).toEqual({
         auth: mockAuthConfig,
         routing: expect.any(Object),
-        settings: expect.any(Object),
+        settings: mockStaticSettings,
       });
 
       // Check routing config
@@ -63,56 +80,6 @@ describe('LuigiConfigService', () => {
         skipRoutingForUrlPatterns: [/.*/],
         pageNotFoundHandler: expect.any(Function),
       });
-
-      // Check settings config
-      expect(config.settings).toEqual({
-        header: {
-          title: 'OpenMFP Portal',
-          logo: expect.any(String),
-          favicon: expect.any(String),
-        },
-        experimental: {
-          btpToolLayout: true,
-        },
-        btpToolLayout: true,
-        responsiveNavigation: 'Fiori3',
-        featureToggles: {
-          queryStringParam: 'ft',
-        },
-        appLoadingIndicator: {
-          hideAutomatically: true,
-        },
-      });
-    });
-  });
-
-  describe('getStaticSettingsConfig', () => {
-    it('should return the correct static settings', () => {
-      const settings = (service as any).getStaticSettingsConfig();
-
-      expect(settings).toEqual({
-        header: {
-          title: 'OpenMFP Portal',
-          logo: expect.any(String),
-          favicon: expect.any(String),
-        },
-        experimental: {
-          btpToolLayout: true,
-        },
-        btpToolLayout: true,
-        responsiveNavigation: 'Fiori3',
-        featureToggles: {
-          queryStringParam: 'ft',
-        },
-        appLoadingIndicator: {
-          hideAutomatically: true,
-        },
-      });
-
-      // Check that logo and favicon are blank images
-      const blankImg = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAAC';
-      expect(settings.header.logo).toBe(blankImg);
-      expect(settings.header.favicon).toBe(blankImg);
     });
   });
 

src/lib/services/luigi-config/luigi-config.service.spec.ts

@@ -1,15 +1,19 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
+import { LUIGI_STATIC_SETTINGS_CONFIG_SERVICE_INJECTION_TOKEN } from '../../injection-tokens';
 import { ClientEnvironment } from '../../model/env';
 import { AuthConfigService } from './auth-config.service';
 import { EnvConfigService } from '../env-config.service';
+import { StaticSettingsConfigService } from './static-settings-config.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class LuigiConfigService {
   constructor(
     private envConfigService: EnvConfigService,
-    private authConfigService: AuthConfigService
+    private authConfigService: AuthConfigService,
+    @Inject(LUIGI_STATIC_SETTINGS_CONFIG_SERVICE_INJECTION_TOKEN)
+    private staticSettingsConfigService: StaticSettingsConfigService
   ) {}
 
   public async getLuigiConfiguration() {
@@ -21,30 +25,8 @@ export class LuigiConfigService {
         envConfig.clientId
       ),
       routing: this.getRoutingConfig() as any,
-      settings: this.getStaticSettingsConfig(),
-    };
-  }
-
-  private getStaticSettingsConfig() {
-    const blankImg = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAAC';
-
-    return {
-      header: {
-        title: 'OpenMFP Portal',
-        logo: blankImg,
-        favicon: blankImg,
-      },
-      experimental: {
-        btpToolLayout: true,
-      },
-      btpToolLayout: true,
-      responsiveNavigation: 'Fiori3',
-      featureToggles: {
-        queryStringParam: 'ft',
-      },
-      appLoadingIndicator: {
-        hideAutomatically: true,
-      },
+      settings:
+        this.staticSettingsConfigService.getInitialStaticSettingsConfig(),
     };
   }