feat: P002271-6012 delete mfe info

libs/accelerator/src/lib/topic/syncable-topic.spec.ts

@@ -45,8 +45,7 @@ describe('Syncable Topic', () => {
   it('should get correct value', async () => {
     expect(testSyncableTopic1.getValue()).toEqual(undefined)
 
-    testSyncableTopic1.publish('value1')
-    await testSyncableTopic1.isInitialized
+    await testSyncableTopic1.publish('value1')
 
     expect(testSyncableTopic1.getValue()).toEqual('value1')
     expect(testSyncableTopic2.getValue()).toEqual('value1')

libs/accelerator/src/lib/topic/topic.spec.ts

@@ -142,4 +142,17 @@ describe('Topic', () => {
     expect(v).toEqual(6)
     expect(values1).toEqual(['value1'])
   })
+
+  it('should check isInitialized', (done) => {
+    let initialized = false
+    testTopic1.isInitialized.then(() => (initialized = true))
+
+    expect(initialized).toBe(false)
+
+    testTopic1.publish('test')
+    setTimeout(() => {
+      expect(initialized).toBe(true)
+      done()
+    })
+  })
 })

libs/accelerator/src/lib/topic/topic.ts

@@ -19,6 +19,7 @@ export class Topic<T> implements Subscribable<T> {
   protected isInit = false
   private resolveInitPromise!: (value: void | PromiseLike<void>) => void
   private eventListener = (m: MessageEvent<TopicMessage>) => this.onMessage(m)
+  private publishPromiseResolver: Record<number, () => void> = {}
 
   constructor(private name: string, private version: number) {
     this.isInitializedPromise = new Promise<void>((resolve) => {
@@ -132,9 +133,13 @@ export class Topic<T> implements Subscribable<T> {
     return (<any>this.asObservable()).pipe(...operations)
   }
 
-  publish(value: T) {
+  publish(value: T): Promise<void> {
     const message = new TopicDataMessage<T>(TopicMessageType.TopicNext, this.name, this.version, value)
+    const promise = new Promise<void>((resolve) => {
+      this.publishPromiseResolver[message.timestamp] = resolve
+    })
     window.postMessage(message, '*')
+    return promise
   }
 
   destroy() {
@@ -152,6 +157,11 @@ export class Topic<T> implements Subscribable<T> {
           this.isInit = true
           this.data.next(<TopicDataMessage<T>>m.data)
           this.resolveInitPromise()
+          const publishPromiseResolver = this.publishPromiseResolver[m.data.timestamp]
+          if (publishPromiseResolver) {
+            publishPromiseResolver()
+            delete this.publishPromiseResolver[m.data.timestamp]
+          }
         }
         break
       case TopicMessageType.TopicGet:

libs/keycloak-auth/src/lib/keycloak-auth.service.ts

@@ -72,9 +72,8 @@ export class KeycloakAuthService implements IAuthService {
           return this.keycloakService.login().then(() => 'login')
         }
       })
-      .then(() => {
-        this.appStateService.isAuthenticated$.publish()
-        return this.appStateService.isAuthenticated$.isInitialized
+      .then(async () => {
+        await this.appStateService.isAuthenticated$.publish()
       })
       .then(() => true)
       .catch((err) => {

libs/portal-integration-angular/src/index.ts

@@ -108,3 +108,7 @@ export * from './lib/core/utils/colorutils'
 export * from './lib/core/utils/translate.combined.loader'
 export * from './lib/core/utils/image-logo-url.utils'
 export * from './lib/core/utils/async-translate-loader.utils'
+export * from './lib/core/utils/create-translate-loader.utils'
+export * from './lib/core/utils/add-initialize-module-guard.utils'
+export * from './lib/core/utils/translate-service-initializer.utils'
+export * from './lib/core/utils/portal-api-configuration.utils'

libs/portal-integration-angular/src/lib/api/injection-tokens.ts

@@ -1,5 +1,4 @@
 import { InjectionToken } from '@angular/core'
-import { MfeInfo } from '../model/mfe-info.model'
 import { IAuthService } from './iauth.service'
 
 export interface LibConfig {
@@ -18,14 +17,6 @@ export const APP_CONFIG = new InjectionToken<LibConfig>('APP_CONFIG')
 
 export const AUTH_SERVICE = new InjectionToken<IAuthService>('AUTH_SERVICE')
 
-// export const MFE_NAME = new InjectionToken<string>('OCX_MFE_NAME')
-
-export const MFE_INFO_FN = new InjectionToken<mfeInfoProducer>('OCX_MFE_INFO_FN')
-
-export const MFE_INFO = new InjectionToken<MfeInfo>('OCX_MFE_INFO')
-
-export type mfeInfoProducer = () => MfeInfo
-
 export const SANITY_CHECK = new InjectionToken<string>('OCXSANITY_CHECK')
 
 export const APPLICATION_NAME = new InjectionToken<string>('APPLICATION_NAME')

libs/portal-integration-angular/src/lib/core/components/announcement-banner/announcement-banner.component.spec.ts

@@ -46,13 +46,12 @@ describe('AnnouncementBannerComponent', () => {
     }).compileComponents()
 
     const appStateService = getTestBed().inject(AppStateService)
-    appStateService.currentPortal$.publish({
+    await appStateService.currentPortal$.publish({
       id: 'i-am-test-portal',
       portalName: 'test',
       baseUrl: '',
       microfrontendRegistrations: [],
     })
-    await appStateService.currentPortal$.isInitialized
 
     announcementsApiService = getTestBed().inject(AnnouncementsApiService)
     jest.spyOn(announcementsApiService, 'getAnnouncementById').mockReturnValue(getAnnouncementByIdMock)

libs/portal-integration-angular/src/lib/core/components/announcement-banner/announcement-banner.component.stories.ts

@@ -10,13 +10,12 @@ import { HttpClientModule } from '@angular/common/http'
 import { AppStateService } from '../../../services/app-state.service'
 
 async function initFactory(appStateService: AppStateService) {
-  appStateService.currentPortal$.publish({
+  await appStateService.currentPortal$.publish({
     baseUrl: '/demo',
     portalName: 'Demo',
     id: 'Demo',
     microfrontendRegistrations: [],
   })
-  await appStateService.currentPortal$.isInitialized
 
   return () => {
     appStateService

libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html

@@ -30,8 +30,8 @@
       <div class="flex justify-content-center mb-3">
         <img
           class="image"
-          src="{{ item.imagePath }}"
-          (error)="imgError($event)"
+          src="{{ item.imagePath || (fallbackImagePath$ | async) }}"
+          (error)="imgError(item)"
           alt="{{resolveFieldData(item, titleLineId)|| ''}}"
         />
       </div>

libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.ts

@@ -13,7 +13,6 @@ import {
 } from '@angular/core'
 import { DataSortDirection } from '../../../model/data-sort-direction'
 import { MenuItem } from 'primeng/api'
-import { MFE_INFO } from '../../../api/injection-tokens'
 import { MfeInfo } from '../../../model/mfe-info.model'
 import { DataAction } from '../../../model/data-action'
 import { TranslateService } from '@ngx-translate/core'
@@ -24,6 +23,7 @@ import { BehaviorSubject, combineLatest, map, mergeMap, Observable } from 'rxjs'
 import { DataSortBase } from '../data-sort-base/data-sort-base'
 import { Router } from '@angular/router'
 import { UserService } from '../../../services/user.service'
+import { AppStateService } from '../../../services/app-state.service'
 
 export type ListGridData = {
   id: string | number
@@ -164,17 +164,21 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
   observedOutputs = 0
 
   displayedItems$: Observable<unknown[]> | undefined
+  fallbackImagePath$!: Observable<string>
 
   constructor(
     @Inject(LOCALE_ID) locale: string,
-    @Inject(MFE_INFO) private mfeInfo: MfeInfo,
     translateService: TranslateService,
     private userService: UserService,
     private router: Router,
-    private injector: Injector
+    private injector: Injector,
+    private appStateService: AppStateService
   ) {
     super(locale, translateService)
     this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_')
+    this.fallbackImagePath$ = this.appStateService.currentMfe$.pipe(
+      map((currentMfe) => this.getFallbackImagePath(currentMfe))
+    )
   }
 
   ngDoCheck(): void {
@@ -213,10 +217,8 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
     this.editItem.emit(element)
   }
 
-  imgError(event: Event) {
-    if (!!this.fallbackImage && (<any>event?.target)?.src != this.fallbackImage) {
-      ;(<any>event.target).src = this.getFallbackImagePath(this.mfeInfo)
-    }
+  imgError(item: ListGridData) {
+    item.imagePath = ''
   }
 
   getFallbackImagePath(mfeInfo: MfeInfo) {

libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.spec.ts

@@ -4,7 +4,6 @@ import { DataViewComponent } from './data-view.component'
 import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
 import { DataListGridComponent } from '../data-list-grid/data-list-grid.component'
 import { DataViewModule } from 'primeng/dataview'
-import { MFE_INFO } from '../../../api/injection-tokens'
 import { TranslateTestingModule } from 'ngx-translate-testing'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { DataTableComponent } from '../data-table/data-table.component'
@@ -17,17 +16,6 @@ describe('DataViewComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [DataViewComponent, DataListGridComponent, DataTableComponent],
       imports: [DataViewModule, MockAuthModule, TranslateTestingModule.withTranslations({}), HttpClientTestingModule],
-      providers: [
-        {
-          provide: MFE_INFO,
-          useValue: {
-            baseHref: '/base/path',
-            mountPath: '/base/path',
-            remoteBaseUrl: 'http://localhost:4200',
-            shellName: 'shell',
-          },
-        },
-      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(DataViewComponent)

libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.ts

@@ -3,7 +3,6 @@ import {
   ContentChild,
   DoCheck,
   EventEmitter,
-  Inject,
   Injector,
   Input,
   OnInit,
@@ -15,8 +14,6 @@ import { DataListGridComponent, ListGridData } from '../data-list-grid/data-list
 import { Row, Filter, Sort, DataTableComponent } from '../data-table/data-table.component'
 import { DataTableColumn } from '../../../model/data-table-column.model'
 import { DataSortDirection } from '../../../model/data-sort-direction'
-import { IAuthService } from '../../../api/iauth.service'
-import { AUTH_SERVICE } from '../../../api/injection-tokens'
 import { DataAction } from '../../../model/data-action'
 
 export type RowListGridData = ListGridData & Row
@@ -156,7 +153,7 @@ export class DataViewComponent implements DoCheck, OnInit {
     return this.injector.get('InteractiveDataViewComponent', null)?.deleteItem.observed || this.deleteItem.observed
   }
 
-  constructor(@Inject(AUTH_SERVICE) private authService: IAuthService, private injector: Injector) {}
+  constructor(private injector: Injector) {}
   ngOnInit(): void {
     this.firstColumnId = this.columns[0]?.id
   }

libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.spec.ts

@@ -6,7 +6,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { ChartModule } from 'primeng/chart'
 import { MessageModule } from 'primeng/message'
 import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
-import { MFE_INFO } from '../../../api/injection-tokens'
 import { DiagramHarness, TestbedHarnessEnvironment } from '../../../../../testing'
 import { TranslateService } from '@ngx-translate/core'
 
@@ -43,17 +42,6 @@ describe('DiagramComponent', () => {
         }),
         HttpClientTestingModule,
       ],
-      providers: [
-        {
-          provide: MFE_INFO,
-          useValue: {
-            baseHref: '/base/path',
-            mountPath: '/base/path',
-            remoteBaseUrl: 'http://localhost:4200',
-            shellName: 'shell',
-          },
-        },
-      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(DiagramComponent)

libs/portal-integration-angular/src/lib/core/components/group-by-count-diagram/group-by-count-diagram.component.spec.ts

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { GroupByCountDiagramComponent } from './group-by-count-diagram.component'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { TranslateTestingModule } from 'ngx-translate-testing'
-import { MFE_INFO } from '../../../api/injection-tokens'
 import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
 import { ColumnType } from '../../../model/column-type.model'
 import { MessageModule } from 'primeng/message'
@@ -158,17 +157,6 @@ describe('GroupByCountDiagramComponent', () => {
         }),
         HttpClientTestingModule,
       ],
-      providers: [
-        {
-          provide: MFE_INFO,
-          useValue: {
-            baseHref: '/base/path',
-            mountPath: '/base/path',
-            remoteBaseUrl: 'http://localhost:4200',
-            shellName: 'shell',
-          },
-        },
-      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(GroupByCountDiagramComponent)

libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.spec.ts

@@ -14,7 +14,6 @@ import { HarnessLoader, parallel, TestElement } from '@angular/cdk/testing'
 import { PortalCoreModule } from '../../portal-core.module'
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
 import { ColumnType } from '../../../model/column-type.model'
-import { MFE_INFO } from '../../../api/injection-tokens'
 import {
   DataViewHarness,
   ColumnGroupSelectionHarness,
@@ -234,15 +233,6 @@ describe('InteractiveDataViewComponent', () => {
         HttpClientModule,
       ],
       providers: [
-        {
-          provide: MFE_INFO,
-          useValue: {
-            baseHref: '/base/path',
-            mountPath: '/base/path',
-            remoteBaseUrl: 'http://localhost:4200',
-            shellName: 'shell',
-          },
-        },
         { provide: UserService, useClass: MockUserService },
       ],
     }).compileComponents()

libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts

@@ -1,20 +1,8 @@
-import {
-  Component,
-  ContentChild,
-  EventEmitter,
-  Inject,
-  Input,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core'
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core'
 import { DataTableColumn } from '../../../model/data-table-column.model'
 import { DataSortDirection } from '../../../model/data-sort-direction'
 import { Filter, Sort } from '../data-table/data-table.component'
 import { DataViewComponent, RowListGridData } from '../data-view/data-view.component'
-import { AUTH_SERVICE } from '../../../api/injection-tokens'
-import { IAuthService } from '../../../api/iauth.service'
 import { GroupSelectionChangedEvent } from '../column-group-selection/column-group-selection.component'
 import { ColumnSelectionChangedEvent } from '../custom-group-column-selector/custom-group-column-selector.component'
 import { DataAction } from '../../../model/data-action'
@@ -136,8 +124,6 @@ export class InteractiveDataViewComponent implements OnInit {
     this._data = value
   }
 
-  constructor(@Inject(AUTH_SERVICE) private authService: IAuthService) {}
-
   ngOnInit(): void {
     this.selectedGroupKey = this.defaultGroupKey
     this.displayedColumns = this.columns

libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.spec.ts

@@ -85,13 +85,12 @@ describe('PageHeaderComponent', () => {
     }).compileComponents()
 
     const appStateService = getTestBed().inject(AppStateService)
-    appStateService.currentPortal$.publish({
+    await appStateService.currentPortal$.publish({
       id: 'i-am-test-portal',
       portalName: 'test',
       baseUrl: '',
       microfrontendRegistrations: [],
     })
-    await appStateService.currentPortal$.isInitialized
   })
 
   beforeEach(() => {

libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.stories.ts

@@ -25,13 +25,12 @@ function initFactory(breadcrumbService: BreadcrumbService, appStateService: AppS
       { label: 'Level 1', routerLink: 'something' },
       { label: 'Level 2', url: '/' },
     ])
-    appStateService.currentPortal$.publish({
+    await appStateService.currentPortal$.publish({
       baseUrl: '/demo',
       portalName: 'Demo',
       id: 'Demo',
       microfrontendRegistrations: [],
     })
-    await appStateService.currentPortal$.isInitialized
   }
 }