fix(workbench/view): initialize microfrontend loaded into inactive view

Navigating an inactive view to a microfrontend did not load the microfrontend, preventing the microfrontend from setting view properties such as title or CSS class(es).

projects/scion/e2e-testing/src/workbench-client/view.e2e-spec.ts

@@ -12,9 +12,11 @@ import {expect} from '@playwright/test';
 import {test} from '../fixtures';
 import {ViewPagePO} from './page-object/view-page.po';
 import {RouterPagePO} from './page-object/router-page.po';
+import {RouterPagePO as StandaloneRouterPagePO} from '../workbench/page-object/router-page.po';
 import {expectView} from '../matcher/view-matcher';
 import {TextMessageBoxPagePO} from '../text-message-box-page.po';
 import {expectMessageBox} from '../matcher/message-box-matcher';
+import {ViewInfo} from '../workbench/page-object/view-info-dialog.po';
 
 test.describe('Workbench View', () => {
 
@@ -830,7 +832,7 @@ test.describe('Workbench View', () => {
     expect(view2ComponentId).toEqual(await viewPage2.getComponentInstanceId());
   });
 
-  test('should update Angular bindings for active views', async ({appPO, microfrontendNavigator}) => {
+  test('should change detect active views after construction', async ({appPO, microfrontendNavigator}) => {
     await appPO.navigateTo({microfrontendSupport: true});
 
     const capability = await microfrontendNavigator.registerCapability('app1', {
@@ -855,9 +857,10 @@ test.describe('Workbench View', () => {
     await expect.poll(() => viewPage.outlet.getCssClasses()).toContain('testee');
     await expect.poll(() => viewPage.outlet.getCapabilityId()).toEqual(capability.metadata!.id);
     await expect.poll(() => viewPage.outlet.getAppSymbolicName()).toEqual(capability.metadata!.appSymbolicName);
+    await expect(viewPage.view.tab.title).toHaveText('Testee');
   });
 
-  test('should update Angular bindings for inactive views', async ({appPO, microfrontendNavigator}) => {
+  test('should change detect inactive views after construction', async ({appPO, microfrontendNavigator}) => {
     await appPO.navigateTo({microfrontendSupport: true});
 
     const capability = await microfrontendNavigator.registerCapability('app1', {
@@ -882,5 +885,115 @@ test.describe('Workbench View', () => {
     await expect.poll(() => viewPage.outlet.getCssClasses()).toContain('testee');
     await expect.poll(() => viewPage.outlet.getCapabilityId()).toEqual(capability.metadata!.id);
     await expect.poll(() => viewPage.outlet.getAppSymbolicName()).toEqual(capability.metadata!.appSymbolicName);
+    await expect(viewPage.view.tab.title).toHaveText('Testee');
+  });
+
+  /**
+   * In this test, we have an inactive view which is navigated to a non-microfrontend component.
+   * This test verifies that when this view is navigated to a microfrontend, the microfrontend is loaded, e.g., to set the title of the view.
+   */
+  test('should change detect view when navigating from inactive "standalone workbench" view to inactive microfrontend view', async ({appPO, workbenchNavigator, microfrontendNavigator}) => {
+    await appPO.navigateTo({microfrontendSupport: true});
+
+    // Register view 1.
+    await microfrontendNavigator.registerCapability('app1', {
+      type: 'view',
+      qualifier: {view: 'view'},
+      properties: {
+        path: 'test-view',
+        title: 'Microfrontend View',
+      },
+    });
+
+    const standaloneRouter = await workbenchNavigator.openInNewTab(StandaloneRouterPagePO);
+    const microfrontendRouter = await microfrontendNavigator.openInNewTab(RouterPagePO, 'app1');
+    const view = appPO.view({viewId: 'view.100'});
+
+    // Navigate to standalone page.
+    await standaloneRouter.view.tab.click();
+    await standaloneRouter.navigate(['test-pages/navigation-test-page', {title: 'Standalone View'}], {target: 'view.100', activate: false});
+    await expect.poll(() => view.getInfo()).toMatchObject(
+      {
+        viewId: 'view.100',
+        title: 'Standalone View',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    // Navigate to microfrontend.
+    await microfrontendRouter.view.tab.click();
+    await microfrontendRouter.navigate({view: 'view'}, {target: 'view.100', activate: false});
+    await expect.poll(() => view.getInfo()).toMatchObject(
+      {
+        viewId: 'view.100',
+        title: 'Microfrontend View',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    // Navigate to standalone page.
+    await standaloneRouter.view.tab.click();
+    await standaloneRouter.navigate(['test-pages/navigation-test-page', {title: 'Standalone View'}], {target: 'view.100', activate: false});
+    await expect.poll(() => view.getInfo()).toMatchObject(
+      {
+        viewId: 'view.100',
+        title: 'Standalone View',
+      } satisfies Partial<ViewInfo>,
+    );
+  });
+
+  /**
+   * In this test, we have an active view which is navigated to a non-microfrontend component.
+   * This test verifies that when this view is navigated to a microfrontend, the microfrontend is loaded, e.g., to set the title of the view.
+   */
+  test('should change detect view when navigating from active "standalone workbench" view to active microfrontend view', async ({appPO, workbenchNavigator, microfrontendNavigator}) => {
+    await appPO.navigateTo({microfrontendSupport: true});
+
+    await workbenchNavigator.modifyLayout(layout => layout
+      .addPart('right', {align: 'right'})
+      .addView('view.100', {partId: 'right', activateView: true})
+    );
+
+    // Register view 1.
+    await microfrontendNavigator.registerCapability('app1', {
+      type: 'view',
+      qualifier: {view: 'view'},
+      properties: {
+        path: 'test-view',
+        title: 'Microfrontend View',
+      },
+    });
+
+    const standaloneRouter = await workbenchNavigator.openInNewTab(StandaloneRouterPagePO);
+    const microfrontendRouter = await microfrontendNavigator.openInNewTab(RouterPagePO, 'app1');
+    const view = appPO.view({viewId: 'view.100'});
+
+    // Navigate to standalone page.
+    await standaloneRouter.view.tab.click();
+    await standaloneRouter.navigate(['test-pages/navigation-test-page', {title: 'Standalone View'}], {target: 'view.100'});
+    await expect.poll(() => view.getInfo()).toMatchObject(
+      {
+        viewId: 'view.100',
+        title: 'Standalone View',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    // Navigate to microfrontend.
+    await microfrontendRouter.view.tab.click();
+    await microfrontendRouter.navigate({view: 'view'}, {target: 'view.100'});
+    await expect.poll(() => view.getInfo()).toMatchObject(
+      {
+        viewId: 'view.100',
+        title: 'Microfrontend View',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    // Navigate to standalone page.
+    await standaloneRouter.view.tab.click();
+    await standaloneRouter.navigate(['test-pages/navigation-test-page', {title: 'Standalone View'}], {target: 'view.100'});
+    await expect.poll(() => view.getInfo()).toMatchObject(
+      {
+        viewId: 'view.100',
+        title: 'Standalone View',
+      } satisfies Partial<ViewInfo>,
+    );
   });
 });

projects/scion/e2e-testing/src/workbench/view-tab-bar.e2e-spec.ts

@@ -104,7 +104,7 @@ test.describe('View Tabbar', () => {
 
     await workbenchNavigator.createPerspective(factory => factory
       .addPart('left')
-      .addPart('right', {align: 'right'}, {activate: true})
+      .addPart('right', {align: 'right'})
       .addView('view.1', {partId: 'left'})
       .addView('view.2', {partId: 'left', activateView: true})
       .addView('view.3', {partId: 'left'})
@@ -165,7 +165,7 @@ test.describe('View Tabbar', () => {
           direction: 'row',
           ratio: .5,
         }),
-        activePartId: 'left',
+        activePartId: 'right',
       },
     });
   });

projects/scion/e2e-testing/src/workbench/view.e2e-spec.ts

@@ -776,4 +776,34 @@ test.describe('Workbench View', () => {
     // expect the component not to be constructed anew
     await expect.poll(() => viewPage.getComponentInstanceId()).toEqual(componentInstanceId);
   });
+
+  test('should change detect active views after construction', async ({appPO, workbenchNavigator}) => {
+    await appPO.navigateTo({microfrontendSupport: false});
+
+    const routerPage = await workbenchNavigator.openInNewTab(RouterPagePO);
+    await routerPage.navigate(['test-pages/navigation-test-page', {title: 'View Title'}], {
+      target: 'view.100',
+      activate: true,
+      cssClass: 'testee'
+    });
+
+    const viewPage = new ViewPagePO(appPO, {viewId: 'view.100'});
+    await expect.poll(() => viewPage.view.tab.getCssClasses()).toContain('testee');
+    await expect(viewPage.view.tab.title).toHaveText('View Title');
+  });
+
+  test('should change detect inactive views after construction', async ({appPO, workbenchNavigator}) => {
+    await appPO.navigateTo({microfrontendSupport: false});
+
+    const routerPage = await workbenchNavigator.openInNewTab(RouterPagePO);
+    await routerPage.navigate(['test-pages/navigation-test-page', {title: 'View Title'}], {
+      target: 'view.100',
+      activate: false,
+      cssClass: 'testee'
+    });
+
+    const viewPage = new ViewPagePO(appPO, {viewId: 'view.100'});
+    await expect.poll(() => viewPage.view.tab.getCssClasses()).toContain('testee');
+    await expect(viewPage.view.tab.title).toHaveText('View Title');
+  });
 });

projects/scion/e2e-testing/src/workbench/workbench-layout-migration.e2e-spec.ts

@@ -160,4 +160,128 @@ test.describe('Workbench Layout Migration', () => {
       } satisfies Partial<ViewInfo>,
     );
   });
+
+  /**
+   * ## Given layout in version 4:
+   *
+   *           PERIPHERAL AREA                       MAIN AREA                                PERIPHERAL AREA
+   * +-------------------------------+ +--------------------------------------------+ +-------------------------------+
+   * | Part: left                    | | Part: 6f09e6e2-b63a-4f0d-9ae1-06624fdb37c7 | | Part: right                   |
+   * | Views: [view.2, view.3]       | | Views: [view.1]                            | | Views: [view.4]               |
+   * | Active View: view.2           | | Active View: view.1                        | | Active View: view.4           |
+   * |                               | +--------------------------------------------+ |                               |
+   * |                               | | Part: 1d94dcb6-76b6-47eb-b300-39448993d36b | |                               |
+   * |                               | | Views: [view.5]                            | |                               |
+   * |                               | | Active View: view.5                        | |                               |
+   * +-------------------------------+ +--------------------------------------------+ +-------------------------------
+   * view.1: [path='test-view']
+   * view.2: [path='test-view']
+   * view.3: [path='', navigationHint='test-view']
+   * view.4: [path='test-view']
+   * view.5: [path='test-view']
+   */
+  test('should migrate workbench layout v4 to the latest version', async ({appPO}) => {
+    await appPO.navigateTo({
+      url: '#/(view.1:test-view//view.2:test-view//view.4:test-view//view.5:test-view)?main_area=eyJyb290Ijp7InR5cGUiOiJNVHJlZU5vZGUiLCJjaGlsZDEiOnsidHlwZSI6Ik1QYXJ0IiwiaWQiOiI2ZjA5ZTZlMi1iNjNhLTRmMGQtOWFlMS0wNjYyNGZkYjM3YzciLCJzdHJ1Y3R1cmFsIjpmYWxzZSwidmlld3MiOlt7ImlkIjoidmlldy4xIiwibmF2aWdhdGlvbiI6e319XSwiYWN0aXZlVmlld0lkIjoidmlldy4xIn0sImNoaWxkMiI6eyJ0eXBlIjoiTVBhcnQiLCJpZCI6IjFkOTRkY2I2LTc2YjYtNDdlYi1iMzAwLTM5NDQ4OTkzZDM2YiIsInN0cnVjdHVyYWwiOmZhbHNlLCJ2aWV3cyI6W3siaWQiOiJ2aWV3LjUiLCJuYXZpZ2F0aW9uIjp7fX1dLCJhY3RpdmVWaWV3SWQiOiJ2aWV3LjUifSwiZGlyZWN0aW9uIjoiY29sdW1uIiwicmF0aW8iOjAuNX0sImFjdGl2ZVBhcnRJZCI6IjFkOTRkY2I2LTc2YjYtNDdlYi1iMzAwLTM5NDQ4OTkzZDM2YiJ9Ly80',
+      microfrontendSupport: false,
+      localStorage: {
+        'scion.workbench.perspective': 'empty',
+        'scion.workbench.perspectives.empty': 'eyJyZWZlcmVuY2VMYXlvdXQiOnsid29ya2JlbmNoR3JpZCI6ImV5SnliMjkwSWpwN0luUjVjR1VpT2lKTlVHRnlkQ0lzSW1sa0lqb2liV0ZwYmkxaGNtVmhJaXdpYzNSeWRXTjBkWEpoYkNJNmRISjFaU3dpZG1sbGQzTWlPbHRkZlN3aVlXTjBhWFpsVUdGeWRFbGtJam9pYldGcGJpMWhjbVZoSW4wdkx6UT0iLCJ2aWV3T3V0bGV0cyI6Int9In0sInVzZXJMYXlvdXQiOnsid29ya2JlbmNoR3JpZCI6ImV5SnliMjkwSWpwN0luUjVjR1VpT2lKTlZISmxaVTV2WkdVaUxDSmphR2xzWkRFaU9uc2lkSGx3WlNJNklrMVFZWEowSWl3aWFXUWlPaUpzWldaMElpd2ljM1J5ZFdOMGRYSmhiQ0k2ZEhKMVpTd2lkbWxsZDNNaU9sdDdJbWxrSWpvaWRtbGxkeTR5SWl3aWJtRjJhV2RoZEdsdmJpSTZlMzE5TEhzaWFXUWlPaUoyYVdWM0xqTWlMQ0p1WVhacFoyRjBhVzl1SWpwN0ltaHBiblFpT2lKMFpYTjBMWFpwWlhjaWZYMWRMQ0poWTNScGRtVldhV1YzU1dRaU9pSjJhV1YzTGpJaWZTd2lZMmhwYkdReUlqcDdJblI1Y0dVaU9pSk5WSEpsWlU1dlpHVWlMQ0pqYUdsc1pERWlPbnNpZEhsd1pTSTZJazFRWVhKMElpd2lhV1FpT2lKdFlXbHVMV0Z5WldFaUxDSnpkSEoxWTNSMWNtRnNJanAwY25WbExDSjJhV1YzY3lJNlcxMTlMQ0pqYUdsc1pESWlPbnNpZEhsd1pTSTZJazFRWVhKMElpd2lhV1FpT2lKeWFXZG9kQ0lzSW5OMGNuVmpkSFZ5WVd3aU9uUnlkV1VzSW5acFpYZHpJanBiZXlKcFpDSTZJblpwWlhjdU5DSXNJbTVoZG1sbllYUnBiMjRpT250OWZWMHNJbUZqZEdsMlpWWnBaWGRKWkNJNkluWnBaWGN1TkNKOUxDSmthWEpsWTNScGIyNGlPaUp5YjNjaUxDSnlZWFJwYnlJNk1DNDNOWDBzSW1ScGNtVmpkR2x2YmlJNkluSnZkeUlzSW5KaGRHbHZJam93TGpJMWZTd2lZV04wYVhabFVHRnlkRWxrSWpvaWJHVm1kQ0o5THk4MCIsInZpZXdPdXRsZXRzIjoie1widmlldy4yXCI6W3tcInBhdGhcIjpcInRlc3Qtdmlld1wiLFwicGFyYW1ldGVyc1wiOnt9fV0sXCJ2aWV3LjNcIjpbXSxcInZpZXcuNFwiOlt7XCJwYXRoXCI6XCJ0ZXN0LXZpZXdcIixcInBhcmFtZXRlcnNcIjp7fX1dfSJ9fS8vMg==',
+      },
+    });
+
+    await expect(appPO.workbench).toEqualWorkbenchLayout({
+      workbenchGrid: {
+        root: new MTreeNode({
+          direction: 'row',
+          ratio: .25,
+          child1: new MPart({
+            id: 'left',
+            views: [{id: 'view.2'}, {id: 'view.3'}],
+            activeViewId: 'view.2',
+          }),
+          child2: new MTreeNode({
+            direction: 'row',
+            ratio: .75,
+            child1: new MPart({
+              id: MAIN_AREA,
+            }),
+            child2: new MPart({
+              id: 'right',
+              views: [{id: 'view.4'}],
+              activeViewId: 'view.4',
+            }),
+          }),
+        }),
+        activePartId: 'left',
+      },
+      mainAreaGrid: {
+        root: new MTreeNode({
+          direction: 'column',
+          ratio: .5,
+          child1: new MPart({
+            id: '6f09e6e2-b63a-4f0d-9ae1-06624fdb37c7',
+            views: [{id: 'view.1'}],
+            activeViewId: 'view.1',
+          }),
+          child2: new MPart({
+            id: '1d94dcb6-76b6-47eb-b300-39448993d36b',
+            views: [{id: 'view.5'}],
+            activeViewId: 'view.5',
+          }),
+        }),
+        activePartId: '1d94dcb6-76b6-47eb-b300-39448993d36b',
+      },
+    });
+
+    const viewPage1 = new ViewPagePO(appPO, {viewId: 'view.1'});
+    await viewPage1.view.tab.click();
+    await expectView(viewPage1).toBeActive();
+    await expect.poll(() => viewPage1.view.getInfo()).toMatchObject(
+      {
+        routeData: {path: 'test-view', navigationHint: ''},
+        urlSegments: 'test-view',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    const viewPage2 = new ViewPagePO(appPO, {viewId: 'view.2'});
+    await viewPage2.view.tab.click();
+    await expectView(viewPage2).toBeActive();
+    await expect.poll(() => viewPage2.view.getInfo()).toMatchObject(
+      {
+        routeData: {path: 'test-view', navigationHint: ''},
+        urlSegments: 'test-view',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    const viewPage3 = new ViewPagePO(appPO, {viewId: 'view.3'});
+    await viewPage3.view.tab.click();
+    await expectView(viewPage3).toBeActive();
+    await expect.poll(() => viewPage3.view.getInfo()).toMatchObject(
+      {
+        routeData: {path: '', navigationHint: 'test-view'},
+        urlSegments: '',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    const viewPage4 = new ViewPagePO(appPO, {viewId: 'view.4'});
+    await viewPage4.view.tab.click();
+    await expectView(viewPage4).toBeActive();
+    await expect.poll(() => viewPage4.view.getInfo()).toMatchObject(
+      {
+        routeData: {path: 'test-view', navigationHint: ''},
+        urlSegments: 'test-view',
+      } satisfies Partial<ViewInfo>,
+    );
+
+    const viewPage5 = new ViewPagePO(appPO, {viewId: 'view.5'});
+    await viewPage5.view.tab.click();
+    await expectView(viewPage5).toBeActive();
+    await expect.poll(() => viewPage5.view.getInfo()).toMatchObject(
+      {
+        routeData: {path: 'test-view', navigationHint: ''},
+        urlSegments: 'test-view',
+      } satisfies Partial<ViewInfo>,
+    );
+  });
 });

projects/scion/workbench/src/lib/common/uid.util.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2018-2024 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import {UUID} from '@scion/toolkit/uuid';
+
+/**
+ * Generates a UID (unique identifier).
+ */
+export const UID = {
+  /**
+   * Generates a UID (unique identifier) with length 8.
+   */
+  randomUID: (): string => {
+    return UUID.randomUUID().substring(0, 8);
+  },
+};
+
+

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

@@ -33,7 +33,7 @@ import {WorkbenchDialogHeaderDirective} from './dialog-header/workbench-dialog-h
 import {Disposable} from '../common/disposable';
 import {Blockable} from '../glass-pane/blockable';
 import {Blocking} from '../glass-pane/blocking';
-import {randomUUID} from '../common/uuid.util';
+import {UUID} from '@scion/toolkit/uuid';
 
 /** @inheritDoc */
 export class ɵWorkbenchDialog<R = unknown> implements WorkbenchDialog<R>, Blockable, Blocking {
@@ -57,7 +57,7 @@ export class ɵWorkbenchDialog<R = unknown> implements WorkbenchDialog<R>, Block
   /**
    * Unique identity of this dialog.
    */
-  public readonly id = randomUUID();
+  public readonly id = UUID.randomUUID();
   /**
    * Indicates whether this dialog is blocked by other dialog(s) that overlay this dialog.
    */