@eui/tools 5.0.0-rc.2 → 5.0.0-rc.22

package/scripts/csdr/cli/skeletons/app-showcase-eui13/src/assets/config/env-json-config.json

@@ -0,0 +1,41 @@
+{
+    "global": {
+        "appTitle": "CSDR-app",
+        "i18n": {
+            "i18nService": {
+                "defaultLanguage": "en",
+                "languages": [
+                    "en",
+                    "fr",
+                    "es"
+                ]
+            },
+            "i18nLoader": {
+                "i18nFolders": [
+                    "i18n-eui",
+                    "i18n-ecl",
+                    "i18n"
+                ]
+            }
+        }
+    },
+    "versions": {},
+    "modules": {
+        "core": {
+            "api": {
+                "base": "assets/",
+                "user": {
+                    "base": "config/",
+                    "details": "user-details.json",
+                    "preferences": "user-preferences.json",
+                    "rights": "user-rights.json"
+                }
+            }
+        },
+        "users": {
+            "api": {
+                "base": "https://jsonplaceholder.typicode.com/users"
+            }
+        }
+    }
+}

package/scripts/csdr/cli/skeletons/package/frontend-eui10/assets/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "@module.name@.KEY": "english text"
+}

package/scripts/csdr/cli/skeletons/package/frontend-eui10/assets/i18n/fr.json

@@ -0,0 +1,3 @@
+{
+    "@module.name@.KEY": "texte en français"
+}

package/scripts/csdr/cli/skeletons/package/frontend-eui10/gitignore_TO_REPLACE

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+**/node_modules
+**/target
+**/build
+**/dist
+**/out-tsc
+**/tmp
+**/test/reports
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+**/src/**/*.js
+**/src/**/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

package/scripts/csdr/cli/skeletons/package/frontend-eui10/karma.conf.js

@@ -0,0 +1,7 @@
+const karmaConfig = require('@eui/tools/karma/karma.conf.pkg');
+
+module.exports = function (config) {
+    config.set(
+        karmaConfig.get(config, '@module.full.name@', {})
+    );
+};

package/scripts/csdr/cli/skeletons/package/frontend-eui10/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/scripts/csdr/cli/skeletons/package/frontend-eui10/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@module.scope@/@module.name@",
+  "version": "1.0.0"
+}

package/scripts/csdr/cli/skeletons/package/frontend-eui10/src/dummy.spec.ts.TO_REPLACE

@@ -0,0 +1,5 @@
+describe('First test', () => {
+    it('should work', () => {
+        expect(true).toBe(true);
+    });
+});

package/scripts/csdr/cli/skeletons/package/frontend-eui10/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/module';

package/scripts/csdr/cli/skeletons/package/frontend-eui10/src/lib/module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+@NgModule({
+    declarations: [
+    ],
+    imports: [
+    ],
+    exports: [
+    ],
+})
+export class Module { }

package/scripts/csdr/cli/skeletons/package/frontend-eui10/src/test.ts.TO_REPLACE

@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/scripts/csdr/cli/skeletons/package/frontend-eui10/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/scripts/csdr/cli/skeletons/package/frontend-eui10/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/scripts/csdr/cli/skeletons/package/frontend-eui10/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "@module.scope.string@",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "@module.scope.string@",
+      "kebab-case"
+    ]
+  }
+}

package/scripts/csdr/cli/skeletons/package/frontend-option-route/src/lib/components/cmp1/cmp1.component.html

@@ -0,0 +1 @@
+Hello from <strong>@module.name@-cmp1</strong>

package/scripts/csdr/cli/skeletons/package/frontend-option-route/src/lib/components/cmp1/cmp1.component.spec.ts.TO_REPLACE

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Cmp1Component } from './cmp1.component';
+
+describe('ModuleComponent', () => {
+    let component: Cmp1Component;
+    let fixture: ComponentFixture<Cmp1Component>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [Cmp1Component],
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(Cmp1Component);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/scripts/csdr/cli/skeletons/package/frontend-option-route/src/lib/components/cmp1/cmp1.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: '@module.scope.string@-cmp1-component',
+    templateUrl: './cmp1.component.html',
+})
+export class Cmp1Component implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}

package/scripts/csdr/cli/skeletons/package/frontend-remote/angular.json

@@ -3,7 +3,7 @@
     "version": 1,
     "newProjectRoot": "apps",
     "projects": {
-        "remote-element": {
+        "@module.full.name@": {
             "root": ".",
             "sourceRoot": "src",
             "projectType": "application",
@@ -52,11 +52,11 @@
                 "serve": {
                     "builder": "./node_modules/@angular-devkit/build-angular:dev-server",
                     "options": {
-                        "browserTarget": "remote-element:build:serve-dist"
+                        "browserTarget": "@module.full.name@:build:serve-dist"
                     },
                     "configurations": {
                         "production": {
-                            "browserTarget": "remote-element:build:production"
+                            "browserTarget": "@module.full.name@:build:production"
                         }
                     }
                 },

package/scripts/csdr/cli/skeletons/package/frontend-remote/dependencies-composite.json

@@ -1,5 +1,6 @@
 {
     "@eui/deps-base": "^7.0.0",
+
     "@csdr/core": "^1.0.0",
     "@csdr/integration": "^1.0.0",
     "@csdr/zipkin-tracing": "^3.0.0"

package/scripts/csdr/cli/skeletons/package/frontend-remote/src/app/dummy.scss

@@ -0,0 +1,3 @@
+.example {
+    padding: 10px;
+}

package/scripts/csdr/cli/skeletons/package/frontend-remote/src/app/dummy.spec.ts

@@ -0,0 +1,6 @@
+// Dummy test
+describe('Test', () => {
+    it('should work', () => {
+        expect(true).toBe(true);
+    });
+});

package/scripts/csdr/cli/skeletons/package/frontend-remote/src/app/module.component.ts

@@ -1,50 +1,84 @@
-import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { Location } from '@angular/common';
-import { Router, RouterOutlet } from '@angular/router';
+import { Router } from '@angular/router';
 
-import { CONFIG_TOKEN, I18nService } from '@eui/core';
+import { take, retry } from 'rxjs/operators';
+
+import { CONFIG_TOKEN, I18nService, I18nLoadStatus } from '@eui/core';
+import { appConfig } from '../config/index';
+
+enum ElementStatus {
+    Loading = 'loading',
+    Loaded = 'loaded',
+    Error = 'error',
+}
 
 @Component({
     template: `
-        <ng-container *ngIf="render">
+        <ux-block-content *ngIf="moduleStatus === ElementStatus.Loading" [isBlocked]="true">
+            <div style="height: 100%"></div>
+        </ux-block-content>
+        <ng-container *ngIf="moduleStatus === ElementStatus.Loaded">
             <router-outlet></router-outlet>
         </ng-container>
+        <ng-container *ngIf="moduleStatus === ElementStatus.Error">
+            <div class="error-container">
+                <div>
+                    <h1>Translations for this module failed to load.</h1>
+                    <p>Do you want to try again?</p>
+                    <ux-button (click)="loadTranslations()">{{ 'global.RELOAD' | translate }}</ux-button>
+                </div>
+            </div>
+        </ng-container>
     `,
+    styles: [`
+        .error-container {
+            width: 50vw;
+            height: 50vh;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .error-container div {
+            text-align: center
+        }
+    `],
 })
 export class ModuleComponent implements OnInit {
-
-    @ViewChild(RouterOutlet) outlet: RouterOutlet;
-    render: boolean;
+    ElementStatus = ElementStatus;
+    moduleStatus: ElementStatus;
 
     constructor(private router: Router,
                 private location: Location,
                 @Inject(CONFIG_TOKEN) public config: any,
                 private i18nService: I18nService) {
-        const i18nFolders = ['elements/@module.full.name@/bundles/assets/i18n-compiled'];
-        this.i18nService.addResources({ i18nFolders }, '@module.full.name@');
-
-        this.i18nService.onReady('@module.full.name@')
-            .subscribe(() => {
-                this.render = true;
-            });
     }
 
     public ngOnInit() {
         this.router.navigateByUrl(this.location.path(true));
+        this.loadTranslations();
+    }
+
+    private loadTranslations() {
+        this.setStatus(ElementStatus.Loading);
+        this.i18nService.lazyLoad({ i18nFolders: appConfig.global.i18nResources })
+            .pipe(take(1), retry(1))
+            .subscribe((loadStatus: I18nLoadStatus) => {
+                if (!loadStatus.success) {
+                    this.setStatus(ElementStatus.Error);
+                    console.error(`[ELEMENT: ${appConfig.global.elementName}] `, loadStatus.error);
+                } else {
+                    this.setStatus(ElementStatus.Loaded);
+                }
+            }, (error) => {
+                this.setStatus(ElementStatus.Error);
+                console.error(`[ELEMENT: ${appConfig.global.elementName}] `, error);
+            });
+    }
 
-        // This avoids this error https://github.com/angular/angular/issues/29303
-        // when following this steps:
-        // - Go to http://localhost:4200/mywp-remote-sample-v7/
-        // - Click on 'Go to mywp-remote-sample-v7b root'
-        // - Go back twice through the browser to http://localhost:4200/mywp-remote-sample-v7/main
-        // - Click on 'Go to child'
-        // Solution from here:
-        // - https://stackoverflow.com/questions/55617772/angular-7-multiple-outlets-error-cannot-activate-an-already-activated-outle
-        // HANDLE WITH CARE, IT MIGHT HAVE UNKNOWN SIDE EFFECTS!
-        /*this.router.events.subscribe(e => {
-            if (e instanceof ActivationStart) {
-                this.outlet.deactivate();
-            }
-        });*/
+    private setStatus(status: ElementStatus) {
+        this.moduleStatus = status;
     }
 }

package/scripts/csdr/cli/skeletons/package/frontend-remote/src/app/module.ts

@@ -14,41 +14,42 @@ import { TranslateModule, TranslateService, TranslateStore } from '@ngx-translat
 // CSDR CORE - Babel defs & core reducers
 import {
     CachePreventionInterceptor,
+    CONFIG_TOKEN,
     CorsSecurityInterceptor,
     CsrfPreventionInterceptor,
     EuLoginSessionTimeoutHandlingInterceptor,
-    OpenidConnectInterceptor,
-    UxService,
-    CONFIG_TOKEN,
-    UxDomService,
-    UserService,
+    HttpService,
     I18nService,
-    StoreService,
+    LocalStorageService,
     LogService,
-    UxBreadcrumbsService,
+    OpenidConnectInterceptor,
     OpenIdConnectService,
-    UxDynamicMessageBoxService,
-    UxDynamicComponentService,
-    UxAppShellService,
-    HttpService,
-    UxDynamicModalService,
-    LocalStorageService,
     StorageService,
+    StoreService,
+    UserService,
+    UxAllModule,
+    UxAppShellService,
+    UxBreadcrumbsService,
+    UxDomService,
+    UxErrorFeedbackService,
+    UxService,
 } from '@eui/core';
-import { PushNotificationsService } from '@csdr/core';
-import { TRACE_LOCAL_SERVICE_NAME, ZipkinHttpInterceptor, ZipkinTraceManager } from '@csdr/zipkin-tracing';
+import { LanguageInterceptor, PushNotificationsService, BreadcrumbsService } from '@csdr/core';
+// TODO[REMOTE-SETUP] uncomment if zipkin is used
+// import { TRACE_LOCAL_SERVICE_NAME, ZipkinHttpInterceptor, ZipkinTraceManager } from '@csdr/zipkin-tracing';
 
 import { TOKEN, reducerProvider, metaReducers } from './reducers/index';
 import { CustomSerializer } from './reducers/custom-route-serializer';
 
 import { environment } from '../environments/environment';
 
-// TODO - implies creation of sub-angular library root package - see task-manager for details
+// TODO[REMOTE-SETUP] - import from wrapped package
 // import { TaskMgrCommonModule } from '@cc/task-manager';
-import { ELEMENT_ROUTER_TOKEN, PushNotificationMapping } from '@csdr/integration/elements';
+import { ELEMENT_ROUTER_TOKEN, PushNotificationMapping, UxServiceMapping } from '@csdr/integration';
 import { RoutingModule } from './routing.module';
 
 import { ModuleComponent } from './module.component';
+import { appConfig } from '../config';
 
 export function openidConnectInterceptorFactory(config) {
     return new OpenidConnectInterceptor();
@@ -62,10 +63,11 @@ export function openidConnectInterceptorFactory(config) {
         StoreRouterConnectingModule.forRoot({ stateKey: 'router', serializer: CustomSerializer }),
         StoreModule.forRoot(TOKEN, { metaReducers }),
         EffectsModule.forRoot([]),
-        StoreDevtoolsModule.instrument({ name: 'TC remote el', maxAge: 150, logOnly: environment.production }),
+        StoreDevtoolsModule.instrument({ name: appConfig.global.storeName, maxAge: 150, logOnly: environment.production }),
         TranslateModule,
 
-        // TODO - implies creation of sub-angular library root package - see task-manager for details
+        UxAllModule,
+         // TODO import from package
         // TaskMgrCommonModule,
         RoutingModule,
     ],
@@ -77,6 +79,12 @@ export function openidConnectInterceptorFactory(config) {
     ],
     providers: [
         reducerProvider,
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: LanguageInterceptor,
+            deps: [CONFIG_TOKEN, StorageService],
+            multi: true,
+        },
         {
             provide: HTTP_INTERCEPTORS,
             useClass: CorsSecurityInterceptor,
@@ -103,15 +111,21 @@ export function openidConnectInterceptorFactory(config) {
             deps: [CONFIG_TOKEN],
             multi: true,
         },
+        // TODO[REMOTE-SETUP] uncomment if zipkin is used
+        // {
+        //     provide: HTTP_INTERCEPTORS,
+        //     useClass: ZipkinHttpInterceptor,
+        //     deps: [TRACE_LOCAL_SERVICE_NAME, ZipkinTraceManager],
+        //     multi: true,
+        // },
+        { provide: CONFIG_TOKEN, useFactory: () => window['PROVIDERS']['CONFIG_TOKEN'], deps: [] },
         {
-            provide: HTTP_INTERCEPTORS,
-            useClass: ZipkinHttpInterceptor,
-            deps: [TRACE_LOCAL_SERVICE_NAME, ZipkinTraceManager],
-            multi: true,
+            provide: UxService,
+            useFactory: () => new UxServiceMapping(window['PROVIDERS']['ngZone'], window['PROVIDERS']['UxService']),
+            deps: [],
         },
-        { provide: CONFIG_TOKEN, useFactory: () => window['PROVIDERS']['CONFIG_TOKEN'], deps: [] },
-        { provide: UxService, useFactory: () => window['PROVIDERS']['UxService'], deps: [] },
         { provide: UxDomService, useFactory: () => window['PROVIDERS']['UxDomService'], deps: [] },
+        { provide: UxErrorFeedbackService, useFactory: () => window['PROVIDERS']['UxErrorFeedbackService'], deps: [] },
         { provide: LocalStorageService, useFactory: () => window['PROVIDERS']['LocalStorageService'], deps: [] },
         { provide: StorageService, useFactory: () => window['PROVIDERS']['StorageService'], deps: [] },
         { provide: LogService, useFactory: () => window['PROVIDERS']['LogService'], deps: [] },
@@ -125,25 +139,16 @@ export function openidConnectInterceptorFactory(config) {
         { provide: OpenIdConnectService, useFactory: () => window['PROVIDERS']['OpenIdConnectService'], deps: [] },
         { provide: HttpService, useFactory: () => window['PROVIDERS']['HttpService'], deps: [] },
         { provide: UxAppShellService, useFactory: () => window['PROVIDERS']['UxAppShellService'], deps: [] },
-        {
-            provide: UxDynamicMessageBoxService,
-            useFactory: () => window['PROVIDERS']['UxDynamicMessageBoxService'],
-            deps: [],
-        },
-        { provide: UxDynamicModalService, useFactory: () => window['PROVIDERS']['UxDynamicModalService'], deps: [] },
-        {
-            provide: UxDynamicComponentService,
-            useFactory: () => window['PROVIDERS']['UxDynamicComponentService'],
-            deps: [],
-        },
         {
             provide: PushNotificationsService,
             useFactory: (zone: NgZone) => new PushNotificationMapping(zone, window['PROVIDERS']['PushNotificationsService']),
             deps: [NgZone],
         },
+        { provide: BreadcrumbsService, useFactory: () => window['PROVIDERS']['BreadcrumbsService'], deps: [] },
         { provide: ELEMENT_ROUTER_TOKEN, useFactory: () => window['PROVIDERS']['ELEMENT_ROUTER_TOKEN'], deps: [] },
-        { provide: TRACE_LOCAL_SERVICE_NAME, useFactory: () => window['PROVIDERS']['TRACE_LOCAL_SERVICE_NAME'], deps: [] },
-        { provide: ZipkinTraceManager, useFactory: () => window['PROVIDERS']['ZipkinTraceManager'], deps: [] },
+        // TODO[REMOTE-SETUP] uncomment if zipkin is used
+        // { provide: TRACE_LOCAL_SERVICE_NAME, useFactory: () => window['PROVIDERS']['TRACE_LOCAL_SERVICE_NAME'], deps: [] },
+        // { provide: ZipkinTraceManager, useFactory: () => window['PROVIDERS']['ZipkinTraceManager'], deps: [] },
     ],
 })
 export class AppModule {
@@ -154,7 +159,7 @@ export class AppModule {
     ngDoBootstrap() {
         const elementSampleEui = createCustomElement(ModuleComponent, { injector: this.injector });
         try {
-            customElements.define('@module.full.name@', elementSampleEui);
+            customElements.define(appConfig.global.elementName, elementSampleEui);
         } catch (e) {
             console.log(e);
         }

package/scripts/csdr/cli/skeletons/package/frontend-remote/src/app/routing.module.ts

@@ -1,17 +1,20 @@
 import { NgModule, NgZone, Inject } from '@angular/core';
-import { RouterModule, Routes, Router } from '@angular/router';
+import { RouterModule, Routes, Router, NavigationStart } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { filter, distinctUntilChanged } from 'rxjs/operators';
 
-import { ELEMENT_ROUTER_TOKEN, IRouterService } from '@csdr/integration/elements';
+import { CCRoute, ELEMENT_ROUTER_TOKEN, IRouterService } from '@csdr/integration';
 
-// TODO - get routes from linked root package lib
+// TODO[REMOTE-SETUP] adapt to wrapped package import
 // import { routes } from '@cc/task-manager';
-import { GLOBAL } from '../config/global';
+import { appConfig } from '../config/index';
 import { ModuleComponent } from './module.component';
 
 const prefixedRoutes: Routes = [
     {
-        path: GLOBAL.baseUrl,
-        children: routes, // TODO
+        path: appConfig.global.baseUrl,
+        // TODO[REMOTE-SETUP] adapt to wrapped package import
+        // children: routes,
     },
     { path: '**', component: ModuleComponent },
 ];
@@ -26,15 +29,26 @@ const prefixedRoutes: Routes = [
     ],
 })
 export class RoutingModule {
+    private routes: CCRoute[] = prefixedRoutes.map(route => route as CCRoute);
+
+    private navigationStartSubscription: Subscription;
 
     constructor(private router: Router,
                 private ngZone: NgZone,
                 @Inject(ELEMENT_ROUTER_TOKEN) private routerService: IRouterService) {
 
-        this.routerService.registerSubRouter(GLOBAL.baseUrl, (url: string) => {
+        this.routerService.registerSubRouter(appConfig.global.baseUrl, (url: string) => {
             this.ngZone.run(() => router.navigateByUrl(url));
-        });
+        }, this.routes);
 
-        this.router.events.pipe().subscribe(data => this.routerService.subrouterEvent(GLOBAL.baseUrl, data));
+        this.navigationStartSubscription = this.router
+            .events
+            .pipe(
+                filter(event => event instanceof NavigationStart),
+                distinctUntilChanged((prev, curr) => prev['url'] === curr['url']),
+            )
+            .subscribe(data => {
+                this.routerService.subrouterEvent(appConfig.global.baseUrl, data);
+            });
     }
 }