feat(workbench-client): enable microfrontend to display a splash unti…

…l loaded Loading and bootstrapping a microfrontend can take some time, at worst, only displaying content once initialized. To indicate the loading of a microfrontend, set the `showSplash` flag to `true` on the view or popup capability. ```ts { type: 'view', qualifier: { component: 'microfrontend', }, properties: { path: 'path/to/microfrontend', showSplash: true, }, } ``` The splash is displayed until the embedded microfrontend signals readiness. ```ts inject(WorkbenchView).signalReady(); ```
SchweizerischeBundesbahnen · Oct 31, 2023 · 7a79065 · 7a79065
1 parent ed63b22
commit 7a79065
Show file tree

Hide file tree

Showing 55 changed files with 1,273 additions and 1,836 deletions.
diff --git a/apps/workbench-client-testing-app/src/app/activator/activator.module.ts b/apps/workbench-client-testing-app/src/app/activator/activator.module.ts
@@ -46,6 +46,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'test-view',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Workbench View',
         heading,
@@ -64,6 +65,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'test-router',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Workbench Router',
         heading,
@@ -82,6 +84,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'register-workbench-capability',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Register Capability',
         heading,
@@ -100,6 +103,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'unregister-workbench-capability',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Unregister Capability',
         heading,
@@ -118,6 +122,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'register-workbench-intention',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Register Intention',
         heading,
@@ -136,6 +141,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'test-popup-opener',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Workbench Popup',
         heading,
@@ -154,6 +160,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'test-popup',
+        showSplash: true,
       },
     });
 
@@ -168,6 +175,7 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'test-message-box-opener',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Workbench Message Box',
         heading,
@@ -186,12 +194,32 @@ export default class ActivatorModule {
       private: false,
       properties: {
         path: 'test-notification-opener',
+        showSplash: true,
         pinToStartPage: true,
         title: 'Workbench Notification',
         heading,
         cssClass: 'e2e-test-notification-opener',
       },
     });
+
+    // Register view to exchange messages via @scion/microfrontend-platform.
+    await this._manifestService.registerCapability<TestingAppViewCapability>({
+      type: WorkbenchCapabilities.View,
+      qualifier: {
+        component: 'messaging',
+        app,
+      },
+      description: '[e2e] Allows exchanging messages via @scion/microfrontend-platform',
+      private: false,
+      properties: {
+        path: 'messaging',
+        showSplash: true,
+        pinToStartPage: true,
+        title: 'Messaging',
+        heading,
+        cssClass: 'e2e-messaging',
+      },
+    });
   }
 }
 

diff --git a/apps/workbench-client-testing-app/src/app/app.component.ts b/apps/workbench-client-testing-app/src/app/app.component.ts
@@ -42,6 +42,9 @@ export class AppComponent {
     this.installWorkbenchThemeSwitcher();
   }
 
+  /**
+   * Switches the workbench theme when changed in the host application.
+   */
   private installWorkbenchThemeSwitcher(): void {
     const documentRoot = inject<Document>(DOCUMENT).documentElement;
     inject(WorkbenchThemeMonitor, {optional: true})?.theme$ // only available if running in the workbench context

diff --git a/apps/workbench-client-testing-app/src/app/app.routes.ts b/apps/workbench-client-testing-app/src/app/app.routes.ts
@@ -51,6 +51,10 @@ export const routes: Routes = [
     path: 'register-workbench-intention',
     loadComponent: () => import('./register-workbench-intention-page/register-workbench-intention-page.component'),
   },
+  {
+    path: 'messaging',
+    loadComponent: () => import('./messaging-page/messaging-page.component'),
+  },
   {
     path: 'test-pages',
     loadChildren: () => import('./test-pages/routes'),

diff --git a/...h-client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.ts b/...h-client-testing-app/src/app/message-box-opener-page/message-box-opener-page.component.ts
@@ -49,7 +49,10 @@ export default class MessageBoxOpenerPageComponent {
   public openError: string | undefined;
   public closeAction: string | undefined;
 
-  constructor(private _messageBoxService: WorkbenchMessageBoxService, private _formBuilder: NonNullableFormBuilder) {
+  constructor(view: WorkbenchView,
+              private _messageBoxService: WorkbenchMessageBoxService,
+              private _formBuilder: NonNullableFormBuilder) {
+    view.signalReady();
   }
 
   public onMessageBoxOpen(): void {

diff --git a/apps/workbench-client-testing-app/src/app/messaging-page/messaging-page.component.html b/apps/workbench-client-testing-app/src/app/messaging-page/messaging-page.component.html
@@ -0,0 +1,5 @@
+<sci-tabbar class="e2e-messaging">
+  <ng-template sciTab label="Publish Message" cssClass="e2e-publish-message">
+    <app-publish-message-page/>
+  </ng-template>
+</sci-tabbar>
diff --git a/apps/workbench-client-testing-app/src/app/messaging-page/messaging-page.component.scss b/apps/workbench-client-testing-app/src/app/messaging-page/messaging-page.component.scss
@@ -0,0 +1,4 @@
+:host {
+  display: grid;
+  padding: 1em;
+}
diff --git a/apps/workbench-client-testing-app/src/app/messaging-page/messaging-page.component.ts b/apps/workbench-client-testing-app/src/app/messaging-page/messaging-page.component.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2018-2023 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 {Component} from '@angular/core';
+import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/tabbar';
+import PublishMesagePageComponent from './publish-message-page/publish-message-page.component';
+import {WorkbenchView} from '@scion/workbench-client';
+
+@Component({
+  selector: 'app-messaging-page',
+  templateUrl: './messaging-page.component.html',
+  styleUrls: ['./messaging-page.component.scss'],
+  standalone: true,
+  imports: [
+    SciTabDirective,
+    SciTabbarComponent,
+    PublishMesagePageComponent,
+  ],
+})
+export default class MessagingPageComponent {
+
+  constructor(view: WorkbenchView) {
+    view.signalReady();
+  }
+}
diff --git a/...sting-app/src/app/messaging-page/publish-message-page/publish-message-page.component.html b/...sting-app/src/app/messaging-page/publish-message-page/publish-message-page.component.html
@@ -0,0 +1,19 @@
+<form [formGroup]="form" autocomplete="off">
+  <section>
+    <sci-form-field label="Topic">
+      <input [formControl]="form.controls.topic" class="e2e-topic">
+    </sci-form-field>
+  </section>
+
+  <button (click)="onPublish()" [disabled]="form.invalid" class="e2e-publish" sci-primary>
+    Publish
+  </button>
+
+  <output class="publish-success e2e-publish-success" *ngIf="publishError === false">
+    Success
+  </output>
+
+  <output class="publish-error e2e-publish-error" *ngIf="publishError">
+    {{publishError}}
+  </output>
+</form>
diff --git a/...sting-app/src/app/messaging-page/publish-message-page/publish-message-page.component.scss b/...sting-app/src/app/messaging-page/publish-message-page/publish-message-page.component.scss
@@ -0,0 +1,37 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+
+  > form {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+
+    > section {
+      flex: none;
+      display: flex;
+      flex-direction: column;
+      gap: .5em;
+      border: 1px solid var(--sci-color-border);
+      border-radius: var(--sci-corner);
+      padding: 1em;
+    }
+
+    > output.publish-success {
+      flex: none;
+      display: none;
+    }
+
+    > output.publish-error {
+      flex: none;
+      border: 1px solid var(--sci-color-negative);
+      background-color: var(--sci-color-background-negative);
+      color: var(--sci-color-negative);
+      border-radius: var(--sci-corner);
+      padding: 1em;
+      font-family: monospace;
+    }
+  }
+}
diff --git a/...testing-app/src/app/messaging-page/publish-message-page/publish-message-page.component.ts b/...testing-app/src/app/messaging-page/publish-message-page/publish-message-page.component.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2018-2023 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 {Component} from '@angular/core';
+import {NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
+import {SciFormFieldComponent} from '@scion/components.internal/form-field';
+import {MessageClient} from '@scion/microfrontend-platform';
+import {stringifyError} from '../../common/stringify-error.util';
+import {NgIf} from '@angular/common';
+
+@Component({
+  selector: 'app-publish-message-page',
+  templateUrl: './publish-message-page.component.html',
+  styleUrls: ['./publish-message-page.component.scss'],
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    SciFormFieldComponent,
+    NgIf,
+  ],
+})
+export default class PublishMesagePageComponent {
+
+  public publishError: string | false | undefined;
+
+  public form = this._formBuilder.group({
+    topic: this._formBuilder.control('', Validators.required),
+  });
+
+  constructor(private _formBuilder: NonNullableFormBuilder, private _messageClient: MessageClient) {
+  }
+
+  public onPublish(): void {
+    this.publishError = undefined;
+    this._messageClient
+      .publish(this.form.controls.topic.value)
+      .then(() => {
+        this.publishError = false;
+        this.form.reset();
+      })
+      .catch(error => this.publishError = stringifyError(error));
+  }
+}
diff --git a/...client-testing-app/src/app/notification-opener-page/notification-opener-page.component.ts b/...client-testing-app/src/app/notification-opener-page/notification-opener-page.component.ts
@@ -10,7 +10,7 @@
 
 import {Component} from '@angular/core';
 import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
-import {WorkbenchNotificationService} from '@scion/workbench-client';
+import {WorkbenchNotificationService, WorkbenchView} from '@scion/workbench-client';
 import {NgIf} from '@angular/common';
 import {stringifyError} from '../common/stringify-error.util';
 import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
@@ -43,7 +43,10 @@ export default class NotificationOpenerPageComponent {
 
   public error: string | undefined;
 
-  constructor(private _formBuilder: NonNullableFormBuilder, private _notificationService: WorkbenchNotificationService) {
+  constructor(view: WorkbenchView,
+              private _formBuilder: NonNullableFormBuilder,
+              private _notificationService: WorkbenchNotificationService) {
+    view.signalReady();
   }
 
   public onNotificationShow(): void {

diff --git a/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.ts b/apps/workbench-client-testing-app/src/app/popup-opener-page/popup-opener-page.component.ts
@@ -10,7 +10,7 @@
 
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
-import {CloseStrategy, PopupOrigin, WorkbenchPopupService} from '@scion/workbench-client';
+import {CloseStrategy, PopupOrigin, WorkbenchPopupService, WorkbenchView} from '@scion/workbench-client';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {undefinedIfEmpty} from '../common/undefined-if-empty.util';
@@ -76,7 +76,10 @@ export default class PopupOpenerPageComponent {
   @ViewChild('open_button', {static: true})
   private _openButton!: ElementRef<HTMLButtonElement>;
 
-  constructor(private _popupService: WorkbenchPopupService, private _formBuilder: NonNullableFormBuilder) {
+  constructor(view: WorkbenchView,
+              private _popupService: WorkbenchPopupService,
+              private _formBuilder: NonNullableFormBuilder) {
+    view.signalReady();
     this._popupOrigin$ = this.observePopupOrigin$();
   }
 

diff --git a/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.ts b/apps/workbench-client-testing-app/src/app/popup-page/popup-page.component.ts
@@ -105,6 +105,7 @@ export default class PopupPageComponent {
     const configuredPopupSize = popup.capability.properties.size;
     this.form.controls.width.setValue(configuredPopupSize?.width ?? 'max-content');
     this.form.controls.height.setValue(configuredPopupSize?.height ?? 'max-content');
+    popup.signalReady();
   }
 
   public onClose(): void {

diff --git a/.../app/register-workbench-capability-page/register-workbench-capability-page.component.html b/.../app/register-workbench-capability-page/register-workbench-capability-page.component.html
@@ -46,6 +46,10 @@
         <sci-checkbox [formControl]="this.form.controls.viewProperties.controls.closable" class="e2e-closable"></sci-checkbox>
       </sci-form-field>
 
+      <sci-form-field label="Show Splash">
+        <sci-checkbox [formControl]="this.form.controls.viewProperties.controls.showSplash" class="e2e-show-splash"></sci-checkbox>
+      </sci-form-field>
+
       <sci-form-field label="CSS Class(es)">
         <input [formControl]="this.form.controls.viewProperties.controls.cssClass" class="e2e-class" placeholder="Separate multiple CSS classes by space">
       </sci-form-field>
@@ -86,6 +90,10 @@
         </sci-form-field>
       </ng-container>
 
+      <sci-form-field label="Show Splash">
+        <sci-checkbox [formControl]="this.form.controls.popupProperties.controls.showSplash" class="e2e-show-splash"></sci-checkbox>
+      </sci-form-field>
+
       <sci-form-field label="Pin to Startpage">
         <sci-checkbox [formControl]="this.form.controls.popupProperties.controls.pinToStartPage" class="e2e-pin-to-startpage"></sci-checkbox>
       </sci-form-field>