fix(workbench): update model properties at the right time (after dest…

…ruction of previous component and before creation of new component)

projects/scion/workbench/src/lib/common/operators.ts

@@ -8,10 +8,12 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import {audit, MonoTypeOperatorFunction, Observable, OperatorFunction} from 'rxjs';
+import {audit, MonoTypeOperatorFunction, Observable, of, OperatorFunction} from 'rxjs';
 import {filter, mergeMap} from 'rxjs/operators';
 import {inject} from '@angular/core';
 import {WorkbenchLayoutService} from '../layout/workbench-layout.service';
+import {ɵDestroyRef} from './ɵdestroy-ref';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
  * Serializes the execution of elements emitted by the source Observable.
@@ -32,10 +34,26 @@ export function filterNull<T>(): OperatorFunction<T | null, T> {
 }
 
 /**
- * Buffers the most recent value from the source Observable until the next layout change.
- * Use this operator to avoid emitting a partially updated layout.
+ * Mirrors the source Observable if the layout is stable. If the layout is not stable,
+ * retains the most recent value and emits it once the layout becomes stable.
+ *
+ * Use this operator to prevent emitting values while the layout is unstable, ensuring
+ * that only the most recent value is emitted once the layout stabilizes.
  */
-export function bufferLatestUntilLayoutChange<T>(): MonoTypeOperatorFunction<T> {
-  const onLayoutChange$ = inject(WorkbenchLayoutService).onLayoutChange$;
-  return audit(() => onLayoutChange$);
+export function bufferLatestUntilLayoutStable<T>(): MonoTypeOperatorFunction<T> {
+  const layoutService = inject(WorkbenchLayoutService);
+
+  return (source$: Observable<T>): Observable<T> => {
+    return new Observable(observer => {
+      const destroyRef = new ɵDestroyRef();
+      source$
+        .pipe(
+          audit(() => layoutService.stable ? of(null) : layoutService.onLayoutChange$),
+          takeUntilDestroyed(destroyRef),
+        )
+        .subscribe(observer);
+
+      return () => destroyRef.destroy();
+    });
+  };
 }

projects/scion/workbench/src/lib/layout/migration/workbench-layout-migration-v3.service.ts

@@ -13,7 +13,7 @@ import {MPartGridV2, MPartV2, MTreeNodeV2, MViewV2} from './model/workbench-layo
 import {MPartGridV3, MPartV3, MTreeNodeV3, MViewV3, VIEW_ID_PREFIX_V3, ViewIdV3} from './model/workbench-layout-migration-v3.model';
 import {Router, UrlTree} from '@angular/router';
 import {WorkbenchMigration} from '../../migration/workbench-migration';
-import {RouterUtils} from '../../routing/router.util';
+import {Routing} from '../../routing/routing.util';
 
 /**
  * Migrates the workbench layout from version 2 to version 3.
@@ -33,7 +33,7 @@ export class WorkbenchLayoutMigrationV3 implements WorkbenchMigration {
     // Otherwise, when migrating the main area and using a view id already present in the perspective,
     // the view outlet would not be removed from the URL, resulting the migrated view to display
     // "Not Found" page or incorrect content.
-    const viewOutlets = RouterUtils.parseViewOutlets(this.getCurrentUrl());
+    const viewOutlets = Routing.parseViewOutlets(this.getCurrentUrl());
     const usedViewIds = new Set<ViewIdV3>([...viewOutlets.keys(), ...collectViewIds(partGridV2.root)]);
 
     // Migrate the grid.

projects/scion/workbench/src/lib/layout/workbench-layout.service.ts

@@ -45,6 +45,11 @@ export class WorkbenchLayoutService {
    */
   public readonly dragging$: Observable<'start' | 'end'>;
 
+  /**
+   * Indicates whether the layout is stable., i.e., is not currently changing.
+   */
+  public stable = true;
+
   constructor(viewDragService: ViewDragService) {
     this.dragging$ = merge(
       merge(this._dragStart$, viewDragService.viewDragStart$).pipe(map((): 'start' => 'start')),
@@ -67,10 +72,15 @@ export class WorkbenchLayoutService {
   }
 
   /**
-   * Sets the given {@link WorkbenchLayout}.
+   * Sets the given {@link WorkbenchLayout}, but only if a different layout instance.
    */
-  public setLayout(layout: ɵWorkbenchLayout): void {
+  public setLayout(layout: ɵWorkbenchLayout): boolean {
+    if (layout === this._layout$.value) {
+      return false;
+    }
+
     this._layout$.next(layout);
+    return true;
   }
 
   /**

projects/scion/workbench/src/lib/layout/ɵworkbench-layout.ts

@@ -15,8 +15,8 @@ import {GridSerializationFlags, WorkbenchLayoutSerializer} from './workench-layo
 import {WorkbenchViewRegistry} from '../view/workbench-view.registry';
 import {WorkbenchPartRegistry} from '../part/workbench-part.registry';
 import {inject, Injectable, InjectionToken, Injector, Predicate, runInInjectionContext} from '@angular/core';
-import {RouterUtils} from '../routing/router.util';
 import {Commands, ViewOutlets, ViewState, ViewStates} from '../routing/routing.model';
+import {Routing} from '../routing/routing.util';
 import {ActivatedRoute, UrlSegment} from '@angular/router';
 import {ViewId} from '../view/workbench-view.model';
 import {Arrays} from '@scion/toolkit/util';
@@ -558,7 +558,7 @@ export class ɵWorkbenchLayout implements WorkbenchLayout {
       throw Error('[NavigateError] Commands, relativeTo or hint must be set.');
     }
 
-    const urlSegments = runInInjectionContext(this._injector, () => RouterUtils.commandsToSegments(commands, {relativeTo: extras?.relativeTo}));
+    const urlSegments = runInInjectionContext(this._injector, () => Routing.commandsToSegments(commands, {relativeTo: extras?.relativeTo}));
     if (urlSegments.length) {
       this._viewOutlets.set(view.id, urlSegments);
     }

projects/scion/workbench/src/lib/microfrontend-platform/microfrontend-host-dialog/microfrontend-host-dialog.component.ts

@@ -10,7 +10,7 @@
 
 import {Component, inject, Injector, Input, OnDestroy, OnInit, runInInjectionContext, StaticProvider} from '@angular/core';
 import {WorkbenchDialog as WorkbenchClientDialog, WorkbenchDialogCapability} from '@scion/workbench-client';
-import {RouterUtils} from '../../routing/router.util';
+import {Routing} from '../../routing/routing.util';
 import {Commands} from '../../routing/routing.model';
 import {Router, RouterOutlet} from '@angular/router';
 import {ɵWorkbenchDialog} from '../../dialog/ɵworkbench-dialog';
@@ -75,7 +75,7 @@ export class MicrofrontendHostDialogComponent implements OnDestroy, OnInit {
   private navigate(path: string | null, extras?: {params?: Map<string, any>}): Promise<boolean> {
     path = Microfrontends.substituteNamedParameters(path, extras?.params);
 
-    const outletCommands: Commands | null = (path !== null ? runInInjectionContext(this._injector, () => RouterUtils.pathToCommands(path!)) : null);
+    const outletCommands: Commands | null = (path !== null ? runInInjectionContext(this._injector, () => Routing.pathToCommands(path!)) : null);
     const commands: Commands = [{outlets: {[this.outletName]: outletCommands}}];
     return this._singleNavigationExecutor.submit(() => this._router.navigate(commands, {skipLocationChange: true, queryParamsHandling: 'preserve'}));
   }

projects/scion/workbench/src/lib/microfrontend-platform/microfrontend-host-message-box/microfrontend-host-message-box.component.ts

@@ -10,7 +10,7 @@
 
 import {Component, ElementRef, inject, Injector, Input, OnDestroy, OnInit, runInInjectionContext, StaticProvider} from '@angular/core';
 import {WorkbenchMessageBox, WorkbenchMessageBoxCapability} from '@scion/workbench-client';
-import {RouterUtils} from '../../routing/router.util';
+import {Routing} from '../../routing/routing.util';
 import {Commands} from '../../routing/routing.model';
 import {Router, RouterOutlet} from '@angular/router';
 import {NgTemplateOutlet} from '@angular/common';
@@ -75,7 +75,7 @@ export class MicrofrontendHostMessageBoxComponent implements OnDestroy, OnInit {
   private navigate(path: string | null, extras?: {params?: Map<string, any>}): Promise<boolean> {
     path = Microfrontends.substituteNamedParameters(path, extras?.params);
 
-    const outletCommands: Commands | null = (path !== null ? runInInjectionContext(this._injector, () => RouterUtils.pathToCommands(path!)) : null);
+    const outletCommands: Commands | null = (path !== null ? runInInjectionContext(this._injector, () => Routing.pathToCommands(path!)) : null);
     const commands: Commands = [{outlets: {[this.outletName]: outletCommands}}];
     return this._singleNavigationExecutor.submit(() => this._router.navigate(commands, {skipLocationChange: true, queryParamsHandling: 'preserve'}));
   }

projects/scion/workbench/src/lib/microfrontend-platform/microfrontend-host-popup/microfrontend-host-popup.component.ts

@@ -10,7 +10,7 @@
 
 import {Component, inject, Injector, OnDestroy, runInInjectionContext, StaticProvider} from '@angular/core';
 import {WorkbenchPopup, ɵPopupContext} from '@scion/workbench-client';
-import {RouterUtils} from '../../routing/router.util';
+import {Routing} from '../../routing/routing.util';
 import {Commands} from '../../routing/routing.model';
 import {Router, RouterOutlet} from '@angular/router';
 import {Popup, ɵPopup} from '../../popup/popup.config';
@@ -71,7 +71,7 @@ export class MicrofrontendHostPopupComponent implements OnDestroy {
   private navigate(path: string | null, extras: {outletName: string; params?: Map<string, any>}): Promise<boolean> {
     path = Microfrontends.substituteNamedParameters(path, extras.params);
 
-    const outletCommands: Commands | null = (path !== null ? runInInjectionContext(this._injector, () => RouterUtils.pathToCommands(path!)) : null);
+    const outletCommands: Commands | null = (path !== null ? runInInjectionContext(this._injector, () => Routing.pathToCommands(path!)) : null);
     const commands: Commands = [{outlets: {[extras.outletName]: outletCommands}}];
     return this._singleNavigationExecutor.submit(() => this._router.navigate(commands, {skipLocationChange: true, queryParamsHandling: 'preserve'}));
   }

projects/scion/workbench/src/lib/microfrontend-platform/workbench-microfrontend-support.ts

@@ -36,7 +36,7 @@ import {MicrofrontendMessageBoxCapabilityValidator} from './microfrontend-messag
 import {Defined} from '@scion/toolkit/util';
 import {canMatchWorkbenchView} from '../view/workbench-view-route-guards';
 import {WORKBENCH_AUXILIARY_ROUTE_OUTLET} from '../routing/workbench-auxiliary-route-installer.service';
-import {RouterUtils} from '../routing/router.util';
+import {Routing} from '../routing/routing.util';
 import {TEXT_MESSAGE_BOX_CAPABILITY_ROUTE} from './microfrontend-host-message-box/text-message/text-message.component';
 import {MicrofrontendMessageBoxLegacyIntentTranslator} from './microfrontend-message-box/microfrontend-message-box-legacy-intent-translator.interceptor';
 import {MicrofrontendPerspectiveCapabilityValidator} from './microfrontend-perspective/microfrontend-perspective-capability-validator.interceptor';
@@ -190,6 +190,6 @@ function provideBuiltInTextMessageBoxCapabilityRoute(): EnvironmentProviders {
 function canMatchWorkbenchMessageBox(): CanMatchFn {
   return () => {
     const outlet = inject(WORKBENCH_AUXILIARY_ROUTE_OUTLET, {optional: true});
-    return RouterUtils.isMessageBoxOutlet(outlet);
+    return Routing.isMessageBoxOutlet(outlet);
   };
 }

projects/scion/workbench/src/lib/part/part.component.ts

@@ -24,6 +24,7 @@ import {WorkbenchPortalOutletDirective} from '../portal/workbench-portal-outlet.
 import {ViewPortalPipe} from '../view/view-portal.pipe';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {WORKBENCH_ID} from '../workbench-id';
+import {bufferLatestUntilLayoutStable} from '../common/operators';
 
 @Component({
   selector: 'wb-part',
@@ -112,6 +113,7 @@ export class PartComponent implements OnInit, OnDestroy {
   private constructInactiveViewComponents(): void {
     this.part.viewIds$
       .pipe(
+        bufferLatestUntilLayoutStable(),
         mapArray(viewId => this._viewRegistry.get(viewId)),
         filterArray(view => !view.active && !view.portal.isConstructed),
         mergeMap(views => from(views)),

projects/scion/workbench/src/lib/part/workbench-part.registry.ts

@@ -10,10 +10,8 @@
 
 import {Injectable, OnDestroy} from '@angular/core';
 import {ɵWorkbenchPart} from './ɵworkbench-part.model';
-import {concat, Observable} from 'rxjs';
+import {Observable} from 'rxjs';
 import {WorkbenchObjectRegistry} from '../registry/workbench-object-registry';
-import {take} from 'rxjs/operators';
-import {bufferLatestUntilLayoutChange} from '../common/operators';
 
 /**
  * Registry for {@link WorkbenchPart} model objects.
@@ -26,10 +24,7 @@ export class WorkbenchPartRegistry implements OnDestroy {
     nullObjectErrorFn: partId => Error(`[NullPartError] Part '${partId}' not found.`),
   });
 
-  public parts$: Observable<readonly ɵWorkbenchPart[]> = concat(
-    this._registry.objects$.pipe(take(1)), // immediate emission upon subscription
-    this._registry.objects$.pipe(bufferLatestUntilLayoutChange()),
-  );
+  public parts$: Observable<readonly ɵWorkbenchPart[]> = this._registry.objects$;
 
   /**
    * Registers given part.