Merge pull request #284 from netgrif/NAE-2116

machacjozef · web-flow · commit 874c6ba61bb6 · 2025-07-01T16:12:42.000+02:00
[NAE-2116] Frontend remote configuration
diff --git a/.github/workflows/pr-build.yml b/.github/workflows/pr-build.yml
@@ -5,10 +5,10 @@ on:
 jobs:
     matrix-test:
         name: Matrix Test
-        runs-on: ubuntu-latest
+        runs-on: ubuntu-24.04
         strategy:
             matrix:
-                node-version: [ 18, 20 ]
+                node-version: [ 20, 22, 24 ]
         steps:
             -   uses: actions/checkout@v4
                 with:
@@ -17,7 +17,8 @@ jobs:
                 name: Full Test on Node.js version ${{ matrix.node-version }}
                 with:
                     node-version: ${{ matrix.node-version }}
-            -   run: npm i --legacy-peer-deps
+            -   name: Install dependencies
+                run: npm install --legacy-peer-deps
             -   name: Build & test components-core
                 run: |
                     npm run ncc:build
diff --git a/projects/nae-example-app/src/app/app.module.ts b/projects/nae-example-app/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {Injector, NgModule} from '@angular/core';
+import {APP_INITIALIZER, Injector, NgModule} from '@angular/core';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {
@@ -19,7 +19,8 @@ import {
     ViewService,
     ProfileModule,
     Dashboard,
-    FrontActionModule, NAE_ASYNC_RENDERING_CONFIGURATION
+    FrontActionModule, NAE_ASYNC_RENDERING_CONFIGURATION,
+    loadConfiguration
 } from '@netgrif/components-core';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {FlexLayoutModule, FlexModule} from '@ngbracket/ngx-layout';
@@ -244,10 +245,18 @@ export function HttpLoaderFactory(http: HttpClient) {
         DialogComponentsModule,
         FrontActionModule
     ],
-    providers: [{
-        provide: ConfigurationService,
-        useClass: NaeExampleAppConfigurationService
-    },
+    providers: [
+        ResourceProvider,
+        {
+            provide: ConfigurationService,
+            useClass: NaeExampleAppConfigurationService
+        },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: loadConfiguration,
+            deps: [ConfigurationService],
+            multi: true
+        },
         {provide: NAE_SNACKBAR_VERTICAL_POSITION, useValue: SnackBarVerticalPosition.TOP},
         {provide: NAE_SNACKBAR_HORIZONTAL_POSITION, useValue: SnackBarHorizontalPosition.LEFT},
         {provide: NAE_ASYNC_RENDERING_CONFIGURATION, useValue: {
@@ -257,7 +266,6 @@ export function HttpLoaderFactory(http: HttpClient) {
                 enableAsyncRenderingForNewFields: true,
                 enableAsyncRenderingOnTaskExpand: true
             }},
-        ResourceProvider,
         TranslateService,
         TranslatePipe,
         TranslateStore,
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,13 +1,19 @@
 import {Injectable} from '@angular/core';
-import {ConfigurationService} from '@netgrif/components-core';
-import {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() {
-        super(naeConfig as unknown as NetgrifApplicationEngine);
+    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, _configurationResource, applicationConfig);
     }
 }
diff --git a/projects/nae-example-app/src/assets/env.js b/projects/nae-example-app/src/assets/env.js
@@ -0,0 +1,8 @@
+(function(window) {
+    window["env"] = window["env"] || {};
+
+    window['env']['resolve_configuration'] = false;
+    window['env']['gateway_url'] = 'http://localhost:8800/api';
+    window['env']['application_identifier'] = 'nae';
+    window['env']['type_identifier'] = 'default';
+})(window);
diff --git a/projects/nae-example-app/src/assets/env.template.js b/projects/nae-example-app/src/assets/env.template.js
@@ -0,0 +1,8 @@
+(function(window) {
+    window["env"] = window["env"] || {};
+
+    window['env']['resolve_configuration'] = "${RESOLVE_CONFIGURATION}";
+    window['env']['gateway_url'] = "${GATEWAY_URL}";
+    window['env']['application_identifier'] = "${APPLICATION_IDENTIFIER}";
+    window['env']['type_identifier'] = "${TYPE_IDENTIFIER}";
+})(window);
diff --git a/projects/nae-example-app/src/environments/environment.prod.ts b/projects/nae-example-app/src/environments/environment.prod.ts
@@ -1,3 +1,7 @@
 export const environment = {
-  production: true
+    production: true,
+    resolve_configuration: window['env']['resolve_configuration'] || false,
+    gateway_url: window['env']['gateway_url'] || 'http://localhost:8800/api',
+    application_identifier: window['env']['application_identifier'] || 'nae',
+    type_identifier: window['env']['type_identifier'] || 'default'
 };
diff --git a/projects/nae-example-app/src/environments/environment.ts b/projects/nae-example-app/src/environments/environment.ts
@@ -3,7 +3,11 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+    production: false,
+    resolve_configuration:  window['env']['resolve_configuration'] || false,
+    gateway_url:  window['env']['gateway_url'] || 'http://localhost:8800/api',
+    application_identifier: window['env']['application_identifier'] || 'nae',
+    type_identifier: window['env']['type_identifier'] || 'default'
 };
 
 /*
diff --git a/projects/nae-example-app/src/index.html b/projects/nae-example-app/src/index.html
@@ -6,6 +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>
     <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/application-configuration.ts b/projects/netgrif-components-core/src/lib/configuration/application-configuration.ts
@@ -0,0 +1,33 @@
+import {NetgrifApplicationEngine} from '../../commons/schema';
+
+/**
+ * Interface representing the configuration settings for an application.
+ * This configuration defines the essential properties required to initialize
+ * or operate an application within a specific context or environment.
+ *
+ * @interface ApplicationConfiguration
+ *
+ * @property application
+ * Specifies the name or identifier of the application.
+ *
+ * @property type
+ * Indicates the type or category of the application.
+ *
+ * @property [resolve_configuration]
+ * Optional flag that determines whether the configuration should
+ * be resolved dynamically.
+ *
+ * @property [gateway_url]
+ * Optional URL used as the gateway endpoint for the application's communication.
+ *
+ * @property [properties]
+ * Properties of the application representing the whole application configuration
+ * that is typically located inside nae.json.
+ */
+export interface ApplicationConfiguration {
+    application: string;
+    type: string;
+    resolve_configuration?: boolean;
+    gateway_url?: string;
+    properties?: NetgrifApplicationEngine;
+}
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,11 +1,26 @@
 import {NetgrifApplicationEngine, Services, View, Views} from '../../commons/schema';
 import {Observable, of} from 'rxjs';
+import {ApplicationConfiguration} from './application-configuration';
+import {ConfigurationResourceService} from '../resources/engine-endpoint/configuration-resource.service';
+import {catchError, tap} from 'rxjs/operators';
+import {HttpErrorResponse} from '@angular/common/http';
+
 
 export abstract class ConfigurationService {
 
-    private readonly _dataFieldConfiguration: Services['dataFields'];
+    private _dataFieldConfiguration: Services['dataFields'];
+
+    private readonly APPLICATION_CONFIG: ApplicationConfiguration;
+
+    protected constructor(protected configuration: NetgrifApplicationEngine,
+                          protected _configurationResource: ConfigurationResourceService,
+                          protected _applicationConfiguration: ApplicationConfiguration) {
+        this.initialize();
 
-    protected constructor(protected configuration: NetgrifApplicationEngine) {
+        this.APPLICATION_CONFIG = _applicationConfiguration;
+    }
+
+    private initialize(): void {
         this.resolveEndpointURLs();
         this._dataFieldConfiguration = this.getConfigurationSubtree(['services', 'dataFields']);
     }
@@ -246,6 +261,39 @@ export abstract class ConfigurationService {
         return config.providers.auth.address + config.providers.auth.endpoints[endpointKey];
     }
 
+    /**
+     * 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.
+     *
+     * @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(): Observable<any> {
+        if (!this.APPLICATION_CONFIG?.resolve_configuration) {
+            return of(null);
+        }
+        return this._configurationResource.getPublicApplicationConfiguration(this.APPLICATION_CONFIG)
+            .pipe(
+                catchError((err: HttpErrorResponse) => {
+                    if (err.status === 404) {
+                        return of(null);
+                    }
+                    console.log(err.message);
+                    return of(null);
+                }),
+                tap((data: ApplicationConfiguration) => {
+                    if (!data || !data.properties) {
+                        return of(null);
+                    }
+                    this.configuration = data.properties as NetgrifApplicationEngine;
+                    this.initialize();
+                })
+            );
+    }
+
     private createConfigurationCopy(): any {
         return this.deepCopy(this.configuration);
     }
diff --git a/projects/netgrif-components-core/src/lib/configuration/public-api.ts b/projects/netgrif-components-core/src/lib/configuration/public-api.ts
@@ -1,2 +1,3 @@
 /* SERVICES */
 export * from './configuration.service';
+export * from './application-configuration';
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
diff --git a/projects/netgrif-components-core/src/lib/resources/public-api.ts b/projects/netgrif-components-core/src/lib/resources/public-api.ts
diff --git a/projects/netgrif-components-core/src/lib/utility/load-configuration.ts b/projects/netgrif-components-core/src/lib/utility/load-configuration.ts
diff --git a/projects/netgrif-components-core/src/lib/utility/public-api.ts b/projects/netgrif-components-core/src/lib/utility/public-api.ts
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
diff --git a/projects/netgrif-components-core/src/lib/utility/tests/test-mock-dependencies.module.ts b/projects/netgrif-components-core/src/lib/utility/tests/test-mock-dependencies.module.ts
