feat: standalone mode (onecx#614)

* feat: initial version of standalone mode * feat: initial version of standalone mode * fix: fix linter * fix: add graceful fallback for empty env.json load * feat: move translation loaders to angular-integration-interface, improve createTranslateLoader and deprecate exports in angular-accelerator * feat: ensure unique translations in new create-translate-loader * feat: migrate standalone shell to a module containing shell-viewport wrapper component * fix: fix CI * fix: disable oneCXShellLayout by default in standalone-shell * fix: fix ci * refactor: provide PIA TRANSLATION_PATH from within PIA * refactor: provide TRANSLATION_PATH from within angular accelerator * feat: inject translation paths in libs and remove dependency between shell-core and pia * refactor: move permission checker utils to angular-integration-interface and remove redundant dependency in standalone-shell * refactor: remove dependency between shell-core and angular-accelerator * refactor: move utils to new lib, fix peer deps and peer dep linting * fix: fix storybook imports * refactor: export PROVIDE_STANDALONE_PROVIDERS_CONFIG * refactor: extract and test hasPermissionCheckerFactory * test: add tests for new createTranslateLoader * refactor: improve providers * fix: provide default value for inject * test: add tests for createTranslateLoader without injected TRANSLATION_PATH * fix: update package versions
markuczy · Jan 17, 2025 · 000bd06 · 000bd06
1 parent 4fb2166
commit 000bd06
Show file tree

Hide file tree

Showing 71 changed files with 1,583 additions and 43 deletions.
diff --git a/libs/angular-accelerator/package.json b/libs/angular-accelerator/package.json
@@ -10,15 +10,19 @@
     "@angular/platform-browser": "^18.0.5",
     "@angular/router": "^18.0.5",
     "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "@ngneat/until-destroy": "^10.0.0",
     "@onecx/integration-interface": "^6.0.0-rc.3",
     "@onecx/angular-integration-interface": "^6.0.0-rc.3",
     "@onecx/angular-remote-components": "^6.0.0-rc.3",
     "@onecx/angular-testing": "^6.0.0-rc.3",
+    "@onecx/accelerator": "^6.0.0-rc.3",
+    "@onecx/angular-utils": "^6.0.0-rc.3",
     "chart.js": "^4.4.3",
     "d3-scale-chromatic": "^3.1.0",
     "rxjs": "~7.8.1",
-    "primeng": "^17.18.6"
+    "primeng": "^17.18.6",
+    "@storybook/angular": "^8.3.2"
   },
   "dependencies": {},
   "exports": {

diff --git a/libs/angular-accelerator/project.json b/libs/angular-accelerator/project.json
@@ -63,7 +63,7 @@
         "lintFilePatterns": [
           "libs/angular-accelerator/**/*.ts",
           "libs/angular-accelerator/**/*.html",
-          "libx/angular-accelerator/package.json"
+          "libs/angular-accelerator/package.json"
         ]
       }
     },

diff --git a/libs/angular-accelerator/src/index.ts b/libs/angular-accelerator/src/index.ts
@@ -1,3 +1,6 @@
+// injection tokens + related utilities
+export * from './lib/injection-tokens/has-permission-checker'
+
 // directives
 export * from './lib/directives/if-permission.directive'
 export * from './lib/directives/if-breakpoint.directive'

diff --git a/libs/angular-accelerator/src/lib/angular-accelerator.module.ts b/libs/angular-accelerator/src/lib/angular-accelerator.module.ts
@@ -1,5 +1,9 @@
 import { CommonModule } from '@angular/common'
-import { APP_INITIALIZER, LOCALE_ID, NgModule } from '@angular/core'
+import {
+  APP_INITIALIZER,
+  LOCALE_ID,
+  NgModule,
+} from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { MissingTranslationHandler, MissingTranslationHandlerParams, TranslateModule } from '@ngx-translate/core'
@@ -24,7 +28,8 @@ import { DataLoadingErrorComponent } from './components/data-loading-error/data-
 import { SearchHeaderComponent } from './components/search-header/search-header.component'
 import { AdvancedDirective } from './directives/advanced.directive'
 import { IfBreakpointDirective } from './directives/if-breakpoint.directive'
-import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from './directives/if-permission.directive'
+import { IfPermissionDirective } from './directives/if-permission.directive'
+import { providePermissionChecker, TRANSLATION_PATH } from '@onecx/angular-utils'
 import { SrcDirective } from './directives/src.directive'
 import { TooltipOnOverflowDirective } from './directives/tooltipOnOverflow.directive'
 import { DynamicPipe } from './pipes/dynamic.pipe'
@@ -82,21 +87,28 @@ function appInitializer(userService: UserService) {
     TemplateDirective,
   ],
   providers: [
+    providePermissionChecker(),
     {
       provide: LOCALE_ID,
       useClass: DynamicLocaleId,
       deps: [UserService],
     },
-    {
-      provide: HAS_PERMISSION_CHECKER,
-      useExisting: UserService,
-    },
     {
       provide: APP_INITIALIZER,
       useFactory: appInitializer,
       deps: [UserService],
       multi: true,
     },
+    {
+      provide: TRANSLATION_PATH,
+      useValue: './onecx-angular-accelerator/assets/i18n/',
+      multi: true
+    },
+    {
+      provide: TRANSLATION_PATH,
+      useValue: './onecx-angular-accelerator/assets/i18n/primeng/',
+      multi: true
+    },
     AppConfigService,
     provideConnectionService(),
   ],

diff --git a/...angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts b/...angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts
@@ -11,9 +11,10 @@ import { UserService } from '@onecx/angular-integration-interface'
 import { MockUserService } from '@onecx/angular-integration-interface/mocks'
 import { StorybookTranslateModule } from './../../storybook-translate.module'
 import { DataListGridComponent } from './data-list-grid.component'
-import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from '../../directives/if-permission.directive'
+import { IfPermissionDirective } from '../../directives/if-permission.directive'
 import { TooltipOnOverflowDirective } from '../../directives/tooltipOnOverflow.directive'
 import { MockAuthModule } from '../../mock-auth/mock-auth.module'
+import { HAS_PERMISSION_CHECKER } from '@onecx/angular-utils'
 
 const DataListGridComponentSBConfig: Meta<DataListGridComponent> = {
   title: 'Components/DataListGridComponent',

diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts
@@ -10,12 +10,13 @@ import { MockUserService } from '@onecx/angular-integration-interface/mocks'
 import { DataTableComponent } from './data-table.component'
 import { StorybookTranslateModule } from './../../storybook-translate.module'
 import { MockAuthModule } from '../../mock-auth/mock-auth.module'
-import { HAS_PERMISSION_CHECKER, IfPermissionDirective } from '../../directives/if-permission.directive'
+import { IfPermissionDirective } from '../../directives/if-permission.directive'
 import { ColumnType } from '../../model/column-type.model'
 import { MenuModule } from 'primeng/menu'
 import { DynamicLocaleId } from '../../utils/dynamic-locale-id'
 import { CheckboxModule } from 'primeng/checkbox'
 import { FormsModule } from '@angular/forms'
+import { HAS_PERMISSION_CHECKER } from '@onecx/angular-utils'
 
 type DataTableInputTypes = Pick<DataTableComponent, 'rows' | 'columns' | 'emptyResultsMessage' | 'selectedRows'>
 

diff --git a/libs/angular-accelerator/src/lib/directives/if-permission.directive.ts b/libs/angular-accelerator/src/lib/directives/if-permission.directive.ts
@@ -2,7 +2,6 @@ import {
   Directive,
   ElementRef,
   Inject,
-  InjectionToken,
   Input,
   OnInit,
   Optional,
@@ -11,21 +10,7 @@ import {
   ViewContainerRef,
 } from '@angular/core'
 import { UserService } from '@onecx/angular-integration-interface'
-
-export interface HasPermissionChecker {
-  hasPermission(permissionKey: string): boolean
-}
-
-/**
- * This checker always returns true, basically disabling the permission system on the UI side
- */
-export class AlwaysGrantPermissionChecker implements HasPermissionChecker {
-  hasPermission(_permissionKey: string): boolean {
-    return true
-  }
-}
-
-export const HAS_PERMISSION_CHECKER = new InjectionToken<HasPermissionChecker>('hasPermission')
+import { HAS_PERMISSION_CHECKER, HasPermissionChecker } from '@onecx/angular-utils'
 
 @Directive({ selector: '[ocxIfPermission], [ocxIfNotPermission]' })
 export class IfPermissionDirective implements OnInit {

diff --git a/libs/angular-accelerator/src/lib/injection-tokens/has-permission-checker.ts b/libs/angular-accelerator/src/lib/injection-tokens/has-permission-checker.ts
@@ -0,0 +1,15 @@
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
+export { HasPermissionChecker } from '@onecx/angular-utils'
+
+/**
+ * This checker always returns true, basically disabling the permission system on the UI side
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
+export { AlwaysGrantPermissionChecker } from '@onecx/angular-utils'
+
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
+export { HAS_PERMISSION_CHECKER } from '@onecx/angular-utils'
diff --git a/libs/angular-accelerator/src/lib/services/translation-cache.service.ts b/libs/angular-accelerator/src/lib/services/translation-cache.service.ts
@@ -17,6 +17,9 @@ declare global {
   }
 }
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 @Injectable({ providedIn: 'root' })
 export class TranslationCacheService implements OnDestroy {
   private translationTopic$ = new TranslationCacheTopic()

diff --git a/libs/angular-accelerator/src/lib/utils/async-translate-loader.utils.ts b/libs/angular-accelerator/src/lib/utils/async-translate-loader.utils.ts
@@ -1,6 +1,9 @@
 import { TranslateLoader } from '@ngx-translate/core'
 import { defaultIfEmpty, first, mergeMap, Observable, of, tap } from 'rxjs'
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export class AsyncTranslateLoader implements TranslateLoader {
   static lastTimerId = 0
   timerId = AsyncTranslateLoader.lastTimerId++

diff --git a/libs/angular-accelerator/src/lib/utils/caching-translate-loader.utils.ts b/libs/angular-accelerator/src/lib/utils/caching-translate-loader.utils.ts
@@ -4,6 +4,9 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader'
 import { Observable } from 'rxjs'
 import { TranslationCacheService } from '../services/translation-cache.service'
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export class CachingTranslateLoader implements TranslateLoader {
   private translateLoader: TranslateHttpLoader
 

diff --git a/libs/angular-accelerator/src/lib/utils/create-translate-loader.utils.ts b/libs/angular-accelerator/src/lib/utils/create-translate-loader.utils.ts
@@ -11,6 +11,9 @@ import { TranslateCombinedLoader } from './translate.combined.loader'
 
 let lastTranslateLoaderTimerId = 0
 
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export function createTranslateLoader(
   http: HttpClient,
   appStateService: AppStateService,

diff --git a/libs/angular-accelerator/src/lib/utils/translate.combined.loader.ts b/libs/angular-accelerator/src/lib/utils/translate.combined.loader.ts
@@ -1,5 +1,9 @@
 import { TranslateLoader } from '@ngx-translate/core'
 import { Observable, catchError, forkJoin, map, of } from 'rxjs'
+
+/**
+ * @deprecated Please import from `@onecx/angular-utils` instead.
+ */
 export class TranslateCombinedLoader implements TranslateLoader {
   private _loaders: TranslateLoader[]
   constructor(...loaders: TranslateLoader[]) {

diff --git a/libs/angular-integration-interface/src/lib/services/configuration.service.ts b/libs/angular-integration-interface/src/lib/services/configuration.service.ts
@@ -42,11 +42,9 @@ export class ConfigurationService implements OnDestroy {
 
       loadConfigPromise
         .then(async (config) => {
-          if (config) {
-            await this.config$.publish({ ...this.defaultConfig, ...config }).then(() => {
-              resolve(true)
-            })
-          }
+          await this.config$.publish({ ...this.defaultConfig, ...(config ?? {}) }).then(() => {
+            resolve(true)
+          })
         })
         .catch((e) => {
           console.log(`Failed to load env configuration`)

diff --git a/libs/angular-testing/project.json b/libs/angular-testing/project.json
@@ -48,7 +48,8 @@
       "options": {
         "lintFilePatterns": [
           "libs/angular-testing/**/*.ts",
-          "libs/angular-testing/**/*.html"
+          "libs/angular-testing/**/*.html",
+          "libs/angular-testing/package.json"
         ]
       }
     },

diff --git a/libs/angular-utils/.eslintrc.json b/libs/angular-utils/.eslintrc.json
@@ -0,0 +1,40 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ocx",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}