refactor(workbench-client-testing-app): consolidate theme activation

apps/workbench-client-testing-app/src/app/app.component.ts

@@ -10,12 +10,10 @@
 
 import {Component, inject, Inject, Optional} from '@angular/core';
 import {APP_IDENTITY, FocusMonitor, MicrofrontendPlatformClient} from '@scion/microfrontend-platform';
-import {AsyncPipe, DOCUMENT, NgIf} from '@angular/common';
+import {AsyncPipe, NgIf} from '@angular/common';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {RouterOutlet} from '@angular/router';
 import {A11yModule} from '@angular/cdk/a11y';
-import {WorkbenchThemeMonitor} from '@scion/workbench-client';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-root',
@@ -39,23 +37,5 @@ export class AppComponent {
 
   constructor(@Inject(APP_IDENTITY) @Optional() symbolicName: string) { // only available if running in the workbench context
     this.appSymbolicName = symbolicName;
-    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
-      .pipe(takeUntilDestroyed())
-      .subscribe(theme => {
-        if (theme) {
-          documentRoot.setAttribute('sci-theme', theme.name);
-        }
-        else {
-          documentRoot.removeAttribute('sci-theme');
-        }
-      });
   }
 }

apps/workbench-client-testing-app/src/app/app.config.ts

@@ -14,6 +14,7 @@ import {routes} from './app.routes';
 import {environment} from '../environments/environment';
 import {provideAnimations, provideNoopAnimations} from '@angular/platform-browser/animations';
 import {provideWorkbenchClient} from './workbench-client/workbench-client.provider';
+import {provideWorkbenchTheme} from './theme/workbench-theme-switcher.service';
 
 /**
  * Central place to configure the workbench-client-testing-app.
@@ -22,6 +23,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes, withHashLocation()),
     provideWorkbenchClient(),
+    provideWorkbenchTheme(),
     provideAnimationsIfEnabled(),
   ],
 };

apps/workbench-client-testing-app/src/app/theme/workbench-theme-switcher.service.ts

@@ -0,0 +1,36 @@
+import {EnvironmentProviders, inject, Injectable, makeEnvironmentProviders} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {WorkbenchTheme, WorkbenchThemeMonitor} from '@scion/workbench-client';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {WORKBENCH_POST_CONNECT} from '../workbench-client/workbench-client.provider';
+
+/**
+ * Switches the theme when changed in the workbench.
+ */
+@Injectable(/* DO NOT PROVIDE via 'providedIn' metadata as associated with the {@link WORKBENCH_POST_CONNECT} DI token. */)
+class WorkbenchThemeSwitcher {
+
+  constructor(workbenchThemeMonitor: WorkbenchThemeMonitor) {
+    const documentRoot = inject<Document>(DOCUMENT).documentElement;
+
+    workbenchThemeMonitor.theme$
+      .pipe(takeUntilDestroyed())
+      .subscribe((theme: WorkbenchTheme | null) => {
+        if (theme) {
+          documentRoot.setAttribute('sci-theme', theme.name);
+        }
+        else {
+          documentRoot.removeAttribute('sci-theme');
+        }
+      });
+  }
+}
+
+/**
+ * Registers a set of DI providers to set up workbench theme.
+ */
+export function provideWorkbenchTheme(): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {provide: WORKBENCH_POST_CONNECT, useClass: WorkbenchThemeSwitcher, multi: true},
+  ]);
+}

apps/workbench-client-testing-app/src/app/workbench-client/workbench-client.provider.ts

@@ -8,14 +8,17 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
-import {APP_INITIALIZER, EnvironmentProviders, inject, Injector, makeEnvironmentProviders, NgZone, runInInjectionContext} from '@angular/core';
+import {APP_INITIALIZER, EnvironmentProviders, inject, InjectionToken, Injector, makeEnvironmentProviders, NgZone, runInInjectionContext} from '@angular/core';
 import {APP_IDENTITY, ContextService, FocusMonitor, IntentClient, ManifestService, MessageClient, ObservableDecorator, OutletRouter, PlatformPropertyService, PreferredSizeService} from '@scion/microfrontend-platform';
 import {WorkbenchClient, WorkbenchMessageBoxService, WorkbenchNotificationService, WorkbenchPopup, WorkbenchPopupService, WorkbenchRouter, WorkbenchThemeMonitor, WorkbenchView} from '@scion/workbench-client';
 import {NgZoneObservableDecorator} from './ng-zone-observable-decorator';
 import {Beans} from '@scion/toolkit/bean-manager';
 import {environment} from '../../environments/environment';
-import {firstValueFrom} from 'rxjs';
-import {DOCUMENT} from '@angular/common';
+
+/**
+ * DI token for injectables to be instantiated after connected to the workbench.
+ */
+export const WORKBENCH_POST_CONNECT = new InjectionToken<unknown>('WORKBENCH_POST_CONNECT');
 
 /**
  * Registers a set of DI providers to set up SCION Workbench Client.
@@ -60,7 +63,7 @@ function connectToWorkbenchFn(): () => Promise<void> {
   return async (): Promise<void> => {
     Beans.register(ObservableDecorator, {useValue: new NgZoneObservableDecorator(zone)});
     await zone.runOutsideAngular(() => WorkbenchClient.connect(determineAppSymbolicName()));
-    await runInInjectionContext(injector, applyWorkbenchTheme);
+    await runInInjectionContext(injector, () => inject(WORKBENCH_POST_CONNECT, {optional: true}));
   };
 }
 
@@ -74,14 +77,3 @@ function determineAppSymbolicName(): string {
   }
   return application.symbolicName;
 }
-
-/**
- * Applies the workbench theme.
- */
-async function applyWorkbenchTheme(): Promise<void> {
-  const documentRoot = inject<Document>(DOCUMENT).documentElement;
-  const theme = await firstValueFrom(inject(WorkbenchThemeMonitor).theme$);
-  if (theme) {
-    documentRoot.setAttribute('sci-theme', theme.name);
-  }
-}