refactor(testapp): migrate to Angular's built-in control flow

SchweizerischeBundesbahnen · Jun 18, 2024 · da93cb7 · da93cb7
1 parent cdf332f
commit da93cb7
Show file tree

Hide file tree

Showing 43 changed files with 327 additions and 290 deletions.
diff --git a/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.html b/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.html
@@ -1,29 +1,41 @@
 <header>
   <div class="title">
-    <img *ngIf="isPlatformHost" class="banner" src="scion-microfrontend-platform-banner.svg" alt="SCION Microfrontend Platform">
-    <span *ngIf="pageTitle" class="page-title">{{pageTitle}}</span>
+    @if (isPlatformHost) {
+      <img class="banner" src="scion-microfrontend-platform-banner.svg" alt="SCION Microfrontend Platform">
+    }
+    @if (pageTitle) {
+      <span class="page-title">{{pageTitle}}</span>
+    }
   </div>
   <div class="actions">
     <span class="angular-change-detection-indicator" title="Indicates that Angular is currently checking the application for changes." #angular_change_detection_indicator></span>
-    <span class="chip focus-within e2e-focus-within" title="This document or its embedded web content has received focus" *ngIf="focusMonitor.focusWithin$ | async">focus-within</span>
-    <span class="chip focus e2e-has-focus" *ngIf="focusMonitor.focus$ | async">has-focus</span>
+    @if (focusMonitor.focusWithin$ | async) {
+      <span class="chip focus-within e2e-focus-within" title="This document or its embedded web content has received focus">focus-within</span>
+    }
+    @if (focusMonitor.focus$ | async) {
+      <span class="chip focus e2e-has-focus">has-focus</span>
+    }
     <span class="chip app-name">{{appSymbolicName}}</span>
     <div class="separator"></div>
-    <label class="devtools-toggle" *ngIf="devToolsFormControl.enabled">
-      <sci-toggle-button [formControl]="devToolsFormControl" [class.selected]="devToolsFormControl.value"></sci-toggle-button>
-      DevTools
-    </label>
+    @if (devToolsFormControl.enabled) {
+      <label class="devtools-toggle">
+        <sci-toggle-button [formControl]="devToolsFormControl" [class.selected]="devToolsFormControl.value"/>
+        DevTools
+      </label>
+    }
   </div>
 </header>
 <sci-sashbox [direction]="'column'">
   <ng-template sciSash size="2">
     <sci-viewport>
-      <router-outlet #outlet=outlet (activate)="onRouteActivate(outlet.activatedRoute)"></router-outlet>
+      <router-outlet #outlet=outlet (activate)="onRouteActivate(outlet.activatedRoute)"/>
     </sci-viewport>
   </ng-template>
-  <ng-template sciSash size="1" *ngIf="devToolsFormControl.value">
-    <app-devtools></app-devtools>
-  </ng-template>
+  @if (devToolsFormControl.value) {
+    <ng-template sciSash size="1">
+      <app-devtools/>
+    </ng-template>
+  }
 </sci-sashbox>
 
 <!-- Captures Angular change detection cycles -->

diff --git a/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts b/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts
@@ -14,7 +14,7 @@ import {tap} from 'rxjs/operators';
 import {ActivatedRoute, RouterOutlet} from '@angular/router';
 import {Defined} from '@scion/toolkit/util';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {DevToolsComponent} from '../devtools/devtools.component';
@@ -28,7 +28,6 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
   styleUrls: ['./app-shell.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     AsyncPipe,
     RouterOutlet,
     SciSashboxComponent,

diff --git a/apps/microfrontend-platform-testing-app/src/app/app.component.html b/apps/microfrontend-platform-testing-app/src/app/app.component.html
@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet/>
diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.html b/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.html
@@ -6,7 +6,9 @@
   <button type="button" class="e2e-settings" #settings_button title="Settings" (click)="onSettingsClick()" sciMaterialIcon>settings</button>
 
   <datalist id="app-entry-points">
-    <option *ngFor="let appEntryPoint of appEntryPoints" [value]="appEntryPoint.url">{{appEntryPoint.label}}</option>
+    @for (appEntryPoint of appEntryPoints; track appEntryPoint) {
+      <option [value]="appEntryPoint.url">{{appEntryPoint.label}}</option>
+    }
   </datalist>
 </form>
 

diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts b/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts
@@ -17,7 +17,6 @@ import {ActivatedRoute} from '@angular/router';
 import {Beans} from '@scion/toolkit/bean-manager';
 import {environment} from '../../environments/environment';
 import {TestingAppTopics} from '../testing-app.topics';
-import {NgFor} from '@angular/common';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 
@@ -31,7 +30,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
     ReactiveFormsModule,
     SciMaterialIconDirective,
   ],

diff --git a/...microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.html b/...microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.html
@@ -1,5 +1,7 @@
 <sci-sashbox>
-  <ng-template sciSash *ngFor="let outletName of outletNames$ | async">
-    <app-browser-outlet [outletName]="outletName"></app-browser-outlet>
-  </ng-template>
+  @for (outletName of outletNames$ | async; track outletName) {
+    <ng-template sciSash>
+      <app-browser-outlet [outletName]="outletName"/>
+    </ng-template>
+  }
 </sci-sashbox>
diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.ts b/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.ts
@@ -14,7 +14,7 @@ import {map} from 'rxjs/operators';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {UUID} from '@scion/toolkit/uuid';
 import {BrowserOutletComponent} from '../browser-outlet/browser-outlet.component';
-import {AsyncPipe, NgFor} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 
 @Component({
@@ -23,7 +23,6 @@ import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
   styleUrls: ['./browser-outlets.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     AsyncPipe,
     SciSashboxComponent,
     SciSashDirective,

diff --git a/apps/microfrontend-platform-testing-app/src/app/devtools/devtools.component.html b/apps/microfrontend-platform-testing-app/src/app/devtools/devtools.component.html
@@ -1,3 +1,3 @@
 <sci-router-outlet name="devtools">
-  <sci-throbber type="ellipsis"></sci-throbber>
+  <sci-throbber type="ellipsis"/>
 </sci-router-outlet>
diff --git a/...-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.html b/...-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.html
@@ -6,32 +6,35 @@
     <input [formControl]="form.controls.type" class="e2e-type">
   </sci-form-field>
   <sci-form-field label="Qualifier">
-    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
   </sci-form-field>
   <sci-form-field label="NilQualifier if empty">
-    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"></sci-checkbox>
+    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"/>
   </sci-form-field>
   <sci-form-field label="Application">
     <input [formControl]="form.controls.appSymbolicName" class="e2e-app-symbolic-name">
   </sci-form-field>
 
   <section class="buttons">
-    <button type="submit" *ngIf="!capabilities$" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
-    <button type="submit" *ngIf="capabilities$" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    @if (!capabilities$) {
+      <button type="submit" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
+    } @else {
+      <button type="submit" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    }
     <button type="button" (click)="onReset()" [disabled]="form.pristine" class="e2e-reset">Reset</button>
   </section>
 </form>
 
 <sci-list class="capabilities e2e-capabilities">
-  <ng-container *ngFor="let capability of capabilities$ | async">
+  @for (capability of capabilities$ | async; track capability) {
     <ng-template sciListItem>
       <section class="capability" [attr.data-e2e-capability]="capability | json">
-        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"></sci-qualifier-chip-list>
+        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"/>
         <span class="app">{{capability.metadata!.appSymbolicName}}</span>
         <span class="id">{{capability.metadata!.id}}</span>
         <span class="visibility">{{capability.private ? 'PRIVATE' : 'PUBLIC'}}</span>
         <button type="button" title="Copy capability to clipboard" (click)="onCopyToClipboard(capability)" sciMaterialIcon>content_copy</button>
       </section>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/...nd-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts b/...nd-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts
@@ -15,7 +15,7 @@ import {Observable} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 import {Beans} from '@scion/toolkit/bean-manager';
 import {Clipboard} from '@angular/cdk/clipboard';
-import {AsyncPipe, JsonPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, JsonPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -28,8 +28,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   styleUrls: ['./lookup-capability.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     JsonPipe,
     ReactiveFormsModule,

diff --git a/...nd-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.html b/...nd-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.html
@@ -6,30 +6,33 @@
     <input [formControl]="form.controls.type" class="e2e-type">
   </sci-form-field>
   <sci-form-field label="Qualifier">
-    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
   </sci-form-field>
   <sci-form-field label="NilQualifier if empty">
-    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"></sci-checkbox>
+    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"/>
   </sci-form-field>
   <sci-form-field label="Application">
     <input [formControl]="form.controls.appSymbolicName" class="e2e-app-symbolic-name">
   </sci-form-field>
 
   <section class="buttons">
-    <button type="submit" *ngIf="!intentions$" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
-    <button type="submit" *ngIf="intentions$" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    @if (!intentions$) {
+      <button type="submit" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
+    } @else {
+      <button type="submit" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    }
     <button type="button" (click)="onReset()" [disabled]="form.pristine" class="e2e-reset">Reset</button>
   </section>
 </form>
 
 <sci-list class="intentions e2e-intentions">
-  <ng-container *ngFor="let intention of intentions$ | async">
+  @for (intention of intentions$ | async; track intention) {
     <ng-template sciListItem>
       <section class="intention">
-        <sci-qualifier-chip-list [qualifier]="intention.qualifier" [type]="intention.type"></sci-qualifier-chip-list>
+        <sci-qualifier-chip-list [qualifier]="intention.qualifier" [type]="intention.type"/>
         <span class="app">{{intention.metadata!.appSymbolicName}}</span>
         <span class="id e2e-id">{{intention.metadata!.id}}</span>
       </section>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/...tend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts b/...tend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts
@@ -14,7 +14,7 @@ import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.intern
 import {Observable} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -26,8 +26,6 @@ import {SciQualifierChipListComponent} from '@scion/components.internal/qualifie
   styleUrls: ['./lookup-intention.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     ReactiveFormsModule,
     SciFormFieldComponent,

diff --git a/...tform-testing-app/src/app/manifest/register-capability/register-capability.component.html b/...tform-testing-app/src/app/manifest/register-capability/register-capability.component.html
@@ -5,26 +5,30 @@
       <input [formControl]="registerForm.controls.type" class="e2e-type">
     </sci-form-field>
     <sci-form-field label="Qualifier" direction="column">
-      <sci-key-value-field [keyValueFormArray]="registerForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="registerForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
     </sci-form-field>
     <sci-form-field label="Params" direction="column">
       <input [formControl]="registerForm.controls.params" class="e2e-params" placeholder="JSON Array, e.g., {{paramsPlaceholder | json}}">
     </sci-form-field>
     <sci-form-field label="Private" direction="column">
-      <sci-checkbox [formControl]="registerForm.controls.private" class="e2e-private"></sci-checkbox>
+      <sci-checkbox [formControl]="registerForm.controls.private" class="e2e-private"/>
     </sci-form-field>
     <sci-form-field label="Properties" direction="column">
-      <sci-key-value-field [keyValueFormArray]="registerForm.controls.properties" [addable]="true" [removable]="true" class="e2e-properties"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="registerForm.controls.properties" [addable]="true" [removable]="true" class="e2e-properties"/>
     </sci-form-field>
     <button type="submit" (click)="onRegister()" [disabled]="registerForm.invalid" class="e2e-register" sci-primary>Register</button>
   </form>
 
-  <output class="error e2e-register-error" *ngIf="registerError">
-    {{registerError}}
-  </output>
-  <output class="response e2e-register-response" *ngIf="registerResponse">
-    Capability ID: <span class="e2e-capability-id">{{registerResponse}}</span>
-  </output>
+  @if (registerError) {
+    <output class="error e2e-register-error">
+      {{registerError}}
+    </output>
+  }
+  @if (registerResponse) {
+    <output class="response e2e-register-response">
+      Capability ID: <span class="e2e-capability-id">{{registerResponse}}</span>
+    </output>
+  }
 </section>
 
 <section class="unregister e2e-unregister">
@@ -37,34 +41,38 @@
       <input [formControl]="unregisterForm.controls.type" class="e2e-type">
     </sci-form-field>
     <sci-form-field label="Qualifier" direction="column">
-      <sci-key-value-field [keyValueFormArray]="unregisterForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="unregisterForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
     </sci-form-field>
     <sci-form-field label="NilQualifier if empty" direction="column">
-      <sci-checkbox [formControl]="unregisterForm.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"></sci-checkbox>
+      <sci-checkbox [formControl]="unregisterForm.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"/>
     </sci-form-field>
     <sci-form-field label="Application" direction="column">
       <input [formControl]="unregisterForm.controls.appSymbolicName" class="e2e-app-symbolic-name">
     </sci-form-field>
     <button type="submit" (click)="onUnregister()" [disabled]="unregisterForm.invalid" class="e2e-unregister" sci-primary>Unregister</button>
   </form>
 
-  <output class="error e2e-unregister-error" *ngIf="unregisterError">
-    {{unregisterError}}
-  </output>
-  <output class="response e2e-unregister-response" *ngIf="unregisterResponse">
-    {{unregisterResponse}}
-  </output>
+  @if (unregisterError) {
+    <output class="error e2e-unregister-error">
+      {{unregisterError}}
+    </output>
+  }
+  @if (unregisterResponse) {
+    <output class="response e2e-unregister-response">
+      {{unregisterResponse}}
+    </output>
+  }
 </section>
 
 <sci-list class="capabilities">
-  <ng-container *ngFor="let capability of capabilities$ | async">
+  @for (capability of capabilities$ | async; track capability) {
     <ng-template sciListItem>
       <section class="capability">
-        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"></sci-qualifier-chip-list>
+        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"/>
         <span class="app">{{capability.metadata!.appSymbolicName}}</span>
         <span class="id">{{capability.metadata!.id}}</span>
         <span class="visibility">{{capability.private ? 'PRIVATE' : 'PUBLIC'}}</span>
       </section>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/...latform-testing-app/src/app/manifest/register-capability/register-capability.component.ts b/...latform-testing-app/src/app/manifest/register-capability/register-capability.component.ts
@@ -13,7 +13,7 @@ import {APP_IDENTITY, Capability, ManifestObjectFilter, ManifestService, ParamDe
 import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Observable} from 'rxjs';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, JsonPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, JsonPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -26,8 +26,6 @@ import {parseTypedValues} from '../../common/typed-value-parser.util';
   styleUrls: ['./register-capability.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     JsonPipe,
     ReactiveFormsModule,