Fix routing scheme in etl-serveR

ui/projects/etl-server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "etl-server",
   "description": "Frontend App for the DGP ETL Server",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "keywords": [
     "etl",
     "data",
@@ -32,8 +32,8 @@
   ],
   "homepage": "https://github.com/dataspot/dgp-app",
   "peerDependencies": {
-    "@angular/common": "14",
-    "@angular/core": "14",
+    "@angular/common": "16",
+    "@angular/core": "16",
     "dgp-oauth2-ng": "3",
     "moment": "^2.29.0",
     "ng-event-source": "^1.0.14"

ui/projects/etl-server/src/lib/api.service.ts

@@ -6,11 +6,9 @@ import { AuthService } from 'dgp-oauth2-ng';
 import { Router } from '@angular/router';
 import { RolesService } from './roles.service';
 import { Title } from '@angular/platform-browser';
-import { ENVIRONMENT } from './config';
+import { ConfigService } from './config.service';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class ApiService {
 
   public pipelines = new ReplaySubject<any[]>(1);
@@ -36,11 +34,11 @@ export class ApiService {
   private currentUser_: any = null;
 
   constructor(private http: HttpClient, private auth: AuthService, private router: Router,
-              private roles: RolesService, private title: Title, 
-              @Inject(ENVIRONMENT) private environment: any) {
-      this.API_ENDPOINT = this.environment.api_endpoint;
+              private roles: RolesService, private title: Title, private config: ConfigService) {
+      console.log('ENVIRONMENT2', this.config.ENVIRONMENT);
+      this.API_ENDPOINT = this.config.ENVIRONMENT.api_endpoint;
       this.auth.configure({
-        authServerUrl: this.environment.auth_endpoint,
+        authServerUrl: this.config.ENVIRONMENT.auth_endpoint,
         jwtLocalStorageKey: 'jwt',
         jwtQueryParam: 'jwt',
         profilePagePath: '/p/'

ui/projects/etl-server/src/lib/config.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ConfigService {
+
+    ENVIRONMENT: any = {};
+    EXTRA_MAPPING: any = {};
+
+}
+

ui/projects/etl-server/src/lib/confirmer.service.ts

@@ -2,9 +2,7 @@ import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { first, map } from 'rxjs/operators';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class ConfirmerService {
 
   public ACTION_DELETE_USER = 0;

ui/projects/etl-server/src/lib/datarecords/data-record-dashboard/data-record-dashboard.component.ts

@@ -1,9 +1,9 @@
 import { Component, ComponentFactoryResolver, Inject, Input, OnInit, Type, ViewChild } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { ApiService } from '../../api.service';
-import { EXTRA_MAPPING } from '../../config';
 import { DataRecordEditAuxDirective } from '../../data-record-edit-aux.directive';
 import { DataRecordDashboardInnerComponent } from '../data-record-dashboard-inner/data-record-dashboard-inner.component';
+import { ConfigService } from '../../config.service';
 
 @Component({
   selector: 'etl-data-record-dashboard',
@@ -19,14 +19,14 @@ export class DataRecordDashboardComponent implements OnInit {
 
   constructor(private api: ApiService, 
               private componentFactoryResolver: ComponentFactoryResolver,
-              @Inject(EXTRA_MAPPING) private extraMapping: any) {
+              private config: ConfigService) {
   }
 
   ngOnInit(): void {
     this.api.queryDatarecords(this.def.name)
         .subscribe((datarecords) => {
           this.datarecords = datarecords;
-          const mapping = this.extraMapping[this.def.edit_component] || {}
+          const mapping = this.config.EXTRA_MAPPING[this.def.edit_component] || {}
           this.dashComponent.next(mapping.dashboard || DataRecordDashboardInnerComponent);
         });
 

ui/projects/etl-server/src/lib/datarecords/data-record-edit/data-record-edit.component.ts

@@ -5,9 +5,9 @@ import { first, switchMap } from 'rxjs/operators';
 import { ApiService } from '../../api.service';
 import { RolesService } from '../../roles.service';
 
-import { EXTRA_MAPPING } from '../../config';
 import { DataRecordEditInnerComponent } from '../data-record-edit-inner/data-record-edit-inner.component';
 import { DataRecordEditAuxDirective } from '../../data-record-edit-aux.directive';
+import { ConfigService } from '../../config.service';
 
 @Component({
   selector: 'etl-data-record-edit',
@@ -25,7 +25,7 @@ export class DataRecordEditComponent implements OnInit {
   constructor(public api: ApiService, public roles: RolesService,
              private activatedRoute: ActivatedRoute,
              private componentFactoryResolver: ComponentFactoryResolver,
-             @Inject(EXTRA_MAPPING) private extraMapping: any) {
+             private config: ConfigService) {
     let datarecords: any[] = [];
     this.api.configuration.pipe(
       switchMap((configuration) => {
@@ -51,7 +51,7 @@ export class DataRecordEditComponent implements OnInit {
     )
     .subscribe((datarecord) => {
       this.datarecord = datarecord.value;
-      const mapping = this.extraMapping[this.def.edit_component] || {};
+      const mapping = this.config.EXTRA_MAPPING[this.def.edit_component] || {};
       this.editComponent.next(mapping.detail || DataRecordEditInnerComponent);
     });
     console.log('constructed DataRecordEditComponent!');

ui/projects/etl-server/src/lib/datarecords/data-record-list/data-record-list.component.ts

@@ -3,10 +3,10 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { from, ReplaySubject } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { ApiService } from '../../api.service';
-import { EXTRA_MAPPING } from '../../config';
 import { DataRecordEditAuxDirective } from '../../data-record-edit-aux.directive';
 import { RolesService } from '../../roles.service';
 import { DataRecordListInnerComponent } from '../data-record-list-inner/data-record-list-inner.component';
+import { ConfigService } from '../../config.service';
 
 @Component({
   selector: 'etl-data-record-list',
@@ -22,7 +22,7 @@ export class DataRecordListComponent implements OnInit {
 
   constructor(public api: ApiService, public roles: RolesService, private activatedRoute: ActivatedRoute,
               private componentFactoryResolver: ComponentFactoryResolver, private router: Router,
-              @Inject(EXTRA_MAPPING) private extraMapping: any) {
+              private config: ConfigService) {
     let defs: any[] = [];
     this.api.configuration.pipe(
       switchMap((configuration) => {
@@ -33,7 +33,7 @@ export class DataRecordListComponent implements OnInit {
         const detectedName = params.name;
         for (const def of defs) {
           if (def.name === detectedName) {
-            const mapping = this.extraMapping[def.edit_component] || {};
+            const mapping = this.config.EXTRA_MAPPING[def.edit_component] || {};
             if (mapping.list === false || (def.admin && !this.roles._.pseudoAdmin)) {
               this.router.navigate(['/']);
               return from([]);
@@ -47,7 +47,7 @@ export class DataRecordListComponent implements OnInit {
     )
     .subscribe((datarecords) => {
       this.datarecords = datarecords;
-      const mapping = this.extraMapping[this.def.edit_component] || {};
+      const mapping = this.config.EXTRA_MAPPING[this.def.edit_component] || {};
       this.listComponent.next(mapping.list || DataRecordListInnerComponent);
     });
   }

ui/projects/etl-server/src/lib/datarecords/data-record-user/data-record-user.component.ts

@@ -2,10 +2,10 @@ import { AfterViewInit, Component, ComponentFactoryResolver, EventEmitter, Injec
 import { ApiService } from '../../api.service';
 import { DataRecordEditAuxDirective } from '../../data-record-edit-aux.directive';
 import { RolesService } from '../../roles.service';
-import { EXTRA_MAPPING } from '../../config';
 import { ReplaySubject, Subscription } from 'rxjs';
 import { DataRecordUserInnerComponent } from '../data-record-user-inner/data-record-user-inner.component';
 import { delay, first } from 'rxjs/operators';
+import { ConfigService } from '../../config.service';
 
 @Component({
   selector: 'etl-data-record-user',
@@ -22,12 +22,10 @@ export class DataRecordUserComponent implements OnInit, OnDestroy, AfterViewInit
   @ViewChild(DataRecordEditAuxDirective, { static: true }) inner: DataRecordEditAuxDirective;
   sub: Subscription | null = null;
 
-  constructor(public api: ApiService, public roles: RolesService,
-              // private componentFactoryResolver: ComponentFactoryResolver,
-              @Inject(EXTRA_MAPPING) private extraMapping: any) {}
+  constructor(public api: ApiService, public roles: RolesService, private config: ConfigService) {}
 
   ngOnInit(): void {
-    const mapping = this.extraMapping[this.def.edit_component] || {};
+    const mapping = this.config.EXTRA_MAPPING[this.def.edit_component] || {};
     const component = mapping.user || DataRecordUserInnerComponent;
     this.editComponent.next(component);
   }

ui/projects/etl-server/src/lib/etl-server.module.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -14,7 +15,6 @@ import { DgpWorkbenchButtonsComponent } from './workbench/dgp-workbench-buttons/
 import { DgpWorkbenchComponent } from './workbench/dgp-workbench/dgp-workbench.component';
 import { DynamicFieldsEditorComponent } from './components/dynamic-fields-editor/dynamic-fields-editor.component';
 import { EditPipelineComponent } from './pipelines/edit-pipeline/edit-pipeline.component';
-// import { EtlServerComponent } from './etl-server.component';
 import { ExtendableKeyvalueListComponent } from './components/extendable-keyvalue-list/extendable-keyvalue-list.component';
 import { ExtraConfigQuestionComponent } from './workbench/extra-config-question/extra-config-question.component';
 import { ExtraConfigQuestionsComponent } from './workbench/extra-config-questions/extra-config-questions.component';
@@ -44,13 +44,18 @@ import { TaxonomiesComponent } from './taxonomies/taxonomies/taxonomies.componen
 import { TaxonomyItemComponent } from './taxonomies/taxonomy-item/taxonomy-item.component';
 import { UserListItemComponent } from './users/user-list-item/user-list-item.component';
 import { UsersComponent } from './users/users/users.component';
-import { ENVIRONMENT } from './config';
+import { ConfigService } from './config.service';
 import { DataRecordListInnerComponent } from './datarecords/data-record-list-inner/data-record-list-inner.component';
 import { DataRecordDashboardComponent } from './datarecords/data-record-dashboard/data-record-dashboard.component';
 import { DataRecordDashboardInnerComponent } from './datarecords/data-record-dashboard-inner/data-record-dashboard-inner.component';
 import { DataRecordUserComponent } from './datarecords/data-record-user/data-record-user.component';
 import { DataRecordUserInnerComponent } from './datarecords/data-record-user-inner/data-record-user-inner.component';
-import { CommonModule } from '@angular/common';
+import { ApiService } from './api.service';
+import { ConfirmerService } from './confirmer.service';
+import { StoreService } from './store.service';
+import { RolesService } from './roles.service';
+import { ThemeService } from './theme.service';
+import { WorkbenchService } from './workbench.service';
 
 
 @NgModule({
@@ -102,30 +107,26 @@ import { CommonModule } from '@angular/common';
     DataRecordUserComponent,
     DataRecordUserInnerComponent,
   ],
-  entryComponents: [
-    DataRecordEditInnerComponent
-  ],
   imports: [
     CommonModule,
     EtlServerRoutingModule,
     HttpClientModule,
     FormsModule,
-    DgpOauth2Module
+    DgpOauth2Module,
   ],
   exports: [
     // EtlServerComponent,
     FileUploaderComponent,
   ],
-  providers: [],
+  providers: [
+    ApiService,
+    ConfirmerService,
+    RolesService,
+    StoreService,
+    ThemeService,
+    WorkbenchService,
+  ],
   // bootstrap: [EtlServerComponent]
 })
 export class EtlServerModule {
-  static forRoot(env?: any): ModuleWithProviders<EtlServerModule> {
-    return {
-        ngModule: EtlServerModule,
-        providers: [
-            { provide: ENVIRONMENT, useValue: env }
-        ]
-    };
-  }
 }

ui/projects/etl-server/src/lib/layout/header/header.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { RolesService } from '../../roles.service';
 import { ApiService } from '../../api.service';
 import { first } from 'rxjs/operators';
-import { EXTRA_MAPPING } from '../../config';
+import { ConfigService } from '../../config.service';
 
 @Component({
   selector: 'etl-header',
@@ -21,7 +21,7 @@ export class HeaderComponent implements OnInit {
 
   constructor(
     private activatedRoute: ActivatedRoute, public roles: RolesService, private api: ApiService,
-    @Inject(EXTRA_MAPPING) private extraMapping: any
+    private config: ConfigService,
   ) {
     this.activatedRoute.data.subscribe((data: any) => {
       this.detected = data.name;
@@ -42,7 +42,7 @@ export class HeaderComponent implements OnInit {
   }
 
   showDatarecord(datarecord: any) {
-    const mapping = this.extraMapping[datarecord.edit_component] || {};
+    const mapping = this.config.EXTRA_MAPPING[datarecord.edit_component] || {};
     return mapping.list !== false && (!datarecord.admin || this.roles._.pseudoAdmin);
   }
 }

ui/projects/etl-server/src/lib/roles.service.ts

@@ -1,8 +1,6 @@
 import { Injectable } from '@angular/core';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class RolesService {
 
   public _: any = {};

ui/projects/etl-server/src/lib/store.service.ts

@@ -52,9 +52,7 @@ function compare(obj1: any, obj2: any, prefix: string | null) {
 
 
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class StoreService {
 
   private _config = new BehaviorSubject<any>(Object.assign({}, this.BASE_CONFIG));

ui/projects/etl-server/src/lib/theme.service.ts

@@ -3,9 +3,7 @@ import { getLocaleDirection } from '@angular/common';
 import { ApiService } from './api.service';
 import { first } from 'rxjs/operators';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class ThemeService {
 
   constructor(private api: ApiService, @Inject(LOCALE_ID) public locale: string) {

ui/projects/etl-server/src/lib/workbench.service.ts

@@ -6,9 +6,7 @@ import { switchMap, exhaustMap, map, filter, debounceTime, finalize } from 'rxjs
 import { EventSourcePolyfill } from 'ng-event-source';
 import { ApiService } from './api.service';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class WorkbenchService {
 
   private executionId: string | null = null;

ui/projects/etl-server/src/public-api.ts

@@ -2,13 +2,14 @@
  * Public API Surface of etl-server
  */
 
-export * from './lib/config';
 export * from './lib/utilities';
 export * from './lib/roles.service';
 export * from './lib/confirmer.service';
 export * from './lib/api.service';
 export * from './lib/store.service';
 export * from './lib/workbench.service';
+export * from './lib/config.service';
+
 export * from './lib/files/file-uploader/file-uploader.component';
 // export * from './lib/etl-server.component';
 export * from './lib/etl-server.module';

ui/projects/ui/src/app/app-routing.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { EtlServerModule } from 'etl-server';
+import { environment } from '../environments/environment';
 
 const routes: Routes = [
-  { path: '**', loadChildren: () => EtlServerModule}
+  { path: '**', loadChildren: () => EtlServerModule },
 ];
-
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]

ui/projects/ui/src/app/app.component.ts

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
+import { ConfigService } from 'etl-server';
+import { environment } from '../environments/environment';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.less']
 })
 export class AppComponent {
-  constructor() {
+  constructor(private config: ConfigService) {
+    this.config.EXTRA_MAPPING ={ nil: [] };
+    this.config.ENVIRONMENT = environment;
+    console.log('ENVIRONMENT', this.config.ENVIRONMENT);
   }
 }