[NAE-2116] Frontend remote configuration

camperko · camperko · commit c88d0693d8ac · 2025-06-09T15:43:37.000+02:00
- rework based on pr comments
- fix tests
diff --git a/projects/nae-example-app/src/app/nae-example-app-configuration.service.ts b/projects/nae-example-app/src/app/nae-example-app-configuration.service.ts
@@ -1,19 +1,19 @@
 import {Injectable} from '@angular/core';
-import {ApplicationConfiguration, ConfigurationService, ResourceProvider, NetgrifApplicationEngine} from '@netgrif/components-core';
+import {ApplicationConfiguration, ConfigurationService, NetgrifApplicationEngine, ConfigurationResourceService} from '@netgrif/components-core';
 import {default as naeConfig} from '../../../../nae.json';
 import {environment} from '../environments/environment';
 
 @Injectable({
     providedIn: 'root'
 })
 export class NaeExampleAppConfigurationService extends ConfigurationService {
-    constructor(private resourceProvider: ResourceProvider) {
+    constructor(protected _configurationResource: ConfigurationResourceService) {
         const applicationConfig: ApplicationConfiguration = {
             application: environment.application_identifier,
             type: environment.type_identifier,
             gateway_url: environment.gateway_url,
             resolve_configuration: environment.resolve_configuration
         };
-        super(naeConfig as unknown as NetgrifApplicationEngine, resourceProvider, applicationConfig);
+        super(naeConfig as unknown as NetgrifApplicationEngine, _configurationResource, applicationConfig);
     }
 }
diff --git a/projects/nae-example-app/src/assets/env.js b/projects/nae-example-app/src/assets/env.js
@@ -5,4 +5,4 @@
     window['env']['gateway_url'] = 'http://localhost:8800/api';
     window['env']['application_identifier'] = 'nae';
     window['env']['type_identifier'] = 'default';
-})(this);
+})(window);
diff --git a/projects/nae-example-app/src/assets/env.template.js b/projects/nae-example-app/src/assets/env.template.js
@@ -5,4 +5,4 @@
     window['env']['gateway_url'] = "${GATEWAY_URL}";
     window['env']['application_identifier'] = "${APPLICATION_IDENTIFIER}";
     window['env']['type_identifier'] = "${TYPE_IDENTIFIER}";
-})(this);
+})(window);
diff --git a/projects/nae-example-app/src/index.html b/projects/nae-example-app/src/index.html
@@ -6,7 +6,7 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <script src="./assets/env.js"></script>
+    <script src="assets/env.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
diff --git a/projects/netgrif-components-core/src/lib/authentication/profile/services/profile.service.spec.ts b/projects/netgrif-components-core/src/lib/authentication/profile/services/profile.service.spec.ts
@@ -7,6 +7,10 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {ProfileService} from './profile.service';
 import {NetgrifApplicationEngine} from "../../../../commons/schema";
 import {UserChangePasswordRequest} from "../models/user-change-password-request";
+import {ConfigurationResourceService} from '../../../resources/engine-endpoint/configuration-resource.service';
+import {ResourceProvider} from '../../../resources/resource-provider.service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
 
 describe('ProfileService', () => {
     let service: ProfileService;
@@ -56,6 +60,9 @@ describe('ProfileService', () => {
             TestBed.configureTestingModule({
                 imports: [HttpClientTestingModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
                 providers: [
+                    HttpClient,
+                    ResourceProvider,
+                    ConfigurationResourceService,
                     ProfileService,
                     {provide: ConfigurationService, useClass: MissingEndpointsConfigurationService}
                 ]
@@ -74,8 +81,9 @@ describe('ProfileService', () => {
     });
 });
 
+@Injectable()
 class MissingEndpointsConfigurationService extends ConfigurationService {
-    constructor() {
+    constructor(protected configurationResource: ConfigurationResourceService) {
         super({
             extends: 'nae-default',
             providers: {
@@ -89,6 +97,13 @@ class MissingEndpointsConfigurationService extends ConfigurationService {
                 },
                 resources: []
             }
-        } as unknown as NetgrifApplicationEngine);
+        } as unknown as NetgrifApplicationEngine,
+            configurationResource,
+            {
+                application: 'nae',
+                type: 'default',
+                gateway_url: 'http://localhost:8888/api',
+                resolve_configuration: false
+            });
     }
 }
diff --git a/projects/netgrif-components-core/src/lib/authentication/sign-up/services/sign-up.service.spec.ts b/projects/netgrif-components-core/src/lib/authentication/sign-up/services/sign-up.service.spec.ts
@@ -6,6 +6,10 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterTestingModule} from '@angular/router/testing';
 import {NetgrifApplicationEngine} from '../../../../commons/schema';
+import {ConfigurationResourceService} from '../../../resources/engine-endpoint/configuration-resource.service';
+import {ResourceProvider} from '../../../resources/resource-provider.service';
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
 
 describe('SignUpService', () => {
     let service: SignUpService;
@@ -85,6 +89,9 @@ describe('SignUpService', () => {
             TestBed.configureTestingModule({
                 imports: [HttpClientTestingModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
                 providers: [
+                    HttpClient,
+                    ResourceProvider,
+                    ConfigurationResourceService,
                     SignUpService,
                     {provide: ConfigurationService, useClass: MissingEndpointsConfigurationService}
                 ]
@@ -118,8 +125,9 @@ describe('SignUpService', () => {
     });
 });
 
+@Injectable()
 class MissingEndpointsConfigurationService extends ConfigurationService {
-    constructor() {
+    constructor(protected configurationResource: ConfigurationResourceService) {
         super({
             extends: 'nae-default',
             providers: {
@@ -135,6 +143,13 @@ class MissingEndpointsConfigurationService extends ConfigurationService {
                 },
                 resources: []
             }
-        } as unknown as NetgrifApplicationEngine);
+        } as unknown as NetgrifApplicationEngine,
+            configurationResource,
+            {
+                application: 'nae',
+                type: 'default',
+                gateway_url: 'http://localhost:8888/api',
+                resolve_configuration: false
+            });
     }
 }
diff --git a/projects/netgrif-components-core/src/lib/configuration/configuration.service.ts b/projects/netgrif-components-core/src/lib/configuration/configuration.service.ts
@@ -1,7 +1,8 @@
 import {NetgrifApplicationEngine, Services, View, Views} from '../../commons/schema';
 import {Observable, of} from 'rxjs';
-import {ResourceProvider} from '../resources/resource-provider.service';
 import {ApplicationConfiguration} from './application-configuration';
+import {ConfigurationResourceService} from '../resources/engine-endpoint/configuration-resource.service';
+import {tap} from 'rxjs/operators';
 
 
 export abstract class ConfigurationService {
@@ -11,7 +12,7 @@ export abstract class ConfigurationService {
     private readonly APPLICATION_CONFIG: ApplicationConfiguration;
 
     protected constructor(protected configuration: NetgrifApplicationEngine,
-                          protected _resourceProvider: ResourceProvider,
+                          protected _configurationResource: ConfigurationResourceService,
                           protected _applicationConfiguration: ApplicationConfiguration) {
         this.initialize();
 
@@ -260,27 +261,29 @@ export abstract class ConfigurationService {
     }
 
     /**
-     * Loads the configuration for the application by fetching data from the resource provider
-     * and initializes the application settings based on the fetched configuration.
+     * Loads and initializes application configuration from the backend.
+     * If configuration resolution is disabled in APPLICATION_CONFIG, returns null Observable.
+     * Otherwise fetches public configuration via ConfigurationResourceService.
      *
-     * @return {Promise<any>} A promise that resolves with the fetched configuration or returns null
-     * if the configuration resolution is not enabled.
+     * @returns Observable<any> that emits null if resolution is disabled, otherwise emits the loaded configuration
+     * @fires initialize() Upon successful configuration load to setup endpoints and data field configurations
+     * @see ApplicationConfiguration
+     * @see NetgrifApplicationEngine
      */
-    public loadConfiguration(): Promise<any> {
+    public loadConfiguration(): Observable<any> {
         if (!this.APPLICATION_CONFIG.resolve_configuration) {
-            return null;
+            return of(null);
         }
-        return this._resourceProvider.get$(
-                `/frontend-config/public/${this.APPLICATION_CONFIG.application}/${this.APPLICATION_CONFIG.type}`,
-                this.APPLICATION_CONFIG.gateway_url
-            ).toPromise()
-            .then((data: ApplicationConfiguration) => {
-                if (!data || !data.properties) {
-                    return;
-                }
-                this.configuration = data.properties as NetgrifApplicationEngine;
-                this.initialize();
-            });
+        return this._configurationResource.getPublicApplicationConfiguration(this.APPLICATION_CONFIG)
+            .pipe(
+                tap((data: ApplicationConfiguration) => {
+                    if (!data || !data.properties) {
+                        return;
+                    }
+                    this.configuration = data.properties as NetgrifApplicationEngine;
+                    this.initialize();
+                })
+            );
     }
 
     private createConfigurationCopy(): any {
diff --git a/projects/netgrif-components-core/src/lib/resources/engine-endpoint/configuration-resource.service.spec.ts b/projects/netgrif-components-core/src/lib/resources/engine-endpoint/configuration-resource.service.spec.ts
@@ -0,0 +1,22 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfigurationResourceService } from './configuration-resource.service';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {HttpClient} from '@angular/common/http';
+
+describe('ConfigurationResourceService', () => {
+  let service: ConfigurationResourceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+        imports: [HttpClientTestingModule, NoopAnimationsModule],
+        providers: [HttpClient]
+    });
+    service = TestBed.inject(ConfigurationResourceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/netgrif-components-core/src/lib/resources/engine-endpoint/configuration-resource.service.ts b/projects/netgrif-components-core/src/lib/resources/engine-endpoint/configuration-resource.service.ts
@@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+import {ResourceProvider} from '../resource-provider.service';
+import {ApplicationConfiguration} from '../../configuration/application-configuration';
+import {Observable} from 'rxjs';
+
+/**
+ * @class ConfigurationResourceService
+ * @description Service responsible for retrieving frontend application configurations via HTTP requests.
+ * Provides a RESTful interface for accessing public application configuration endpoints.
+ *
+ * @injectable Provided at root level for application-wide singleton instance
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class ConfigurationResourceService {
+
+    /**
+     * Base URL segment for configuration resource endpoints
+     */
+    private readonly RESOURCE_URL: string = "frontend-config";
+
+    /**
+     * URL segment identifier for public configuration endpoints
+     */
+    private readonly PUBLIC_SUFFIX: string = "public";
+
+    constructor(protected _provider: ResourceProvider) {}
+
+    /**
+     * Retrieves public application configuration from the backend
+     *
+     * @param {ApplicationConfiguration} configuration - Configuration object containing application metadata
+     * @returns {Observable<ApplicationConfiguration>} Observable that emits the public application configuration
+     *
+     * @description Makes a GET request to /frontend-config/public/{app}/{type} endpoint
+     * Uses the provided gateway URL from the configuration object
+     */
+    public getPublicApplicationConfiguration(configuration: ApplicationConfiguration): Observable<ApplicationConfiguration> {
+        return this._provider.get$(
+            `/${this.RESOURCE_URL}/${this.PUBLIC_SUFFIX}/${configuration.application}/${configuration.type}`,
+            configuration.gateway_url
+        );
+    }
+}
diff --git a/projects/netgrif-components-core/src/lib/resources/public-api.ts b/projects/netgrif-components-core/src/lib/resources/public-api.ts
@@ -6,6 +6,7 @@ export * from './engine-endpoint/petri-net-resource.service';
 export * from './engine-endpoint/user-resource.service';
 export * from './engine-endpoint/dashboard-resource.service';
 export * from './engine-endpoint/ldap-group-resource.service';
+export * from './engine-endpoint/configuration-resource.service';
 
 /* PUBLIC SERVICES */
 export * from './engine-endpoint/public/public-case-resource.service';
diff --git a/projects/netgrif-components-core/src/lib/utility/load-configuration.ts b/projects/netgrif-components-core/src/lib/utility/load-configuration.ts
@@ -1,14 +1,28 @@
 import {ConfigurationService} from '../configuration/configuration.service';
-
+import {Observable} from 'rxjs';
 
 /**
- * Loads the configuration from admin node using the provided configuration service.
+ * Factory function that creates a configuration loader for application initialization.
+ * This function serves as an APP_INITIALIZER provider factory to load configuration
+ * before the application bootstrap completes.
  *
- * @param {ConfigurationService} configurationService - The service responsible for loading the configuration.
- * @return {Function} - A function that, when called, returns a Promise resolving to the loaded configuration or void.
+ * @param configurationService - Injectable service handling configuration loading and management
+ * @returns A function that returns an Observable which resolves when configuration is loaded
+ * @throws {Error} When configuration service fails to load required configuration
+ * @example
+ * ```typescript
+ * providers: [
+ *   {
+ *     provide: APP_INITIALIZER,
+ *     useFactory: loadConfiguration,
+ *     deps: [ConfigurationService],
+ *     multi: true
+ *   }
+ * ]
+ * ```
  */
-export function loadConfiguration(configurationService: ConfigurationService): () => Promise<any> | void {
-    return (): Promise<any> => {
+export function loadConfiguration(configurationService: ConfigurationService): () => Observable<any> {
+    return (): Observable<any> => {
         return configurationService.loadConfiguration();
     }
 }
diff --git a/projects/netgrif-components-core/src/lib/utility/tests/test-config.ts b/projects/netgrif-components-core/src/lib/utility/tests/test-config.ts
@@ -1,10 +1,16 @@
 import {ConfigurationService} from '../../configuration/configuration.service';
-import {ResourceProvider} from '../../resources/resource-provider.service';
 import {Injectable} from '@angular/core';
+import {ConfigurationResourceService} from '../../resources/engine-endpoint/configuration-resource.service';
+import {HttpClient, HttpEvent, HttpHandler, HttpRequest} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {ResourceProvider} from '../../resources/resource-provider.service';
 
 @Injectable()
 export class TestConfigurationService extends ConfigurationService {
-    constructor(private resourceProvider: ResourceProvider) {
+    constructor() {
+        const http = new HttpClient(new TestHttp());
+        const resourceProvider = new ResourceProvider(http);
+        const configurationResource = new ConfigurationResourceService(resourceProvider);
         super({
             extends: 'nae-default',
             providers: {
@@ -431,11 +437,18 @@ export class TestConfigurationService extends ConfigurationService {
                 }
             }
         },
-        resourceProvider,
+        configurationResource,
             {
                 application: 'nae',
                 type: 'default',
-                gateway_url: 'http://localhost:8888/api'
+                gateway_url: 'http://localhost:8888/api',
+                resolve_configuration: false
             });
     }
 }
+
+class TestHttp extends HttpHandler {
+    handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+        return undefined;
+    }
+}
