chore(workbench/router): remove blank prefix from navigation extras

To have a consistent API, we have renamed the `blankInsertionIndex` property in `WorkbenchNavigationExtras` to `position`. BREAKING CHANGE: Property `blankInsertionIndex` in `WorkbenchNavigationExtras` has been renamed. To migrate, update to the latest version of `@scion/workbench-client` and use `WorkbenchNavigationExtras.position` instead of `WorkbenchNavigationExtras.blankInsertionIndex`.
SchweizerischeBundesbahnen · May 7, 2024 · 446fa51 · 446fa51
1 parent 1a506ef
commit 446fa51
Show file tree

Hide file tree

Showing 29 changed files with 109 additions and 78 deletions.
diff --git a/...ient-testing-app/src/app/notification-opener-page/notification-opener-page.component.html b/...ient-testing-app/src/app/notification-opener-page/notification-opener-page.component.html
@@ -28,8 +28,8 @@
     </sci-form-field>
 
     <sci-form-field label="Duration">
-      <input [formControl]="form.controls.duration" list="duration" class="e2e-duration">
-      <datalist id="duration">
+      <input [formControl]="form.controls.duration" [attr.list]="durationList" class="e2e-duration">
+      <datalist [attr.id]="durationList">
         <option value="short">short</option>
         <option value="medium">medium</option>
         <option value="long">long</option>

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
@@ -16,6 +16,7 @@ import {stringifyError} from '../common/stringify-error.util';
 import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {CssClassComponent} from '../css-class/css-class.component';
+import {UUID} from '@scion/toolkit/uuid';
 
 @Component({
   selector: 'app-notification-opener-page',
@@ -45,6 +46,8 @@ export default class NotificationOpenerPageComponent {
 
   public notificationOpenError: string | undefined;
 
+  public durationList = `duration-list-${UUID.randomUUID()}`;
+
   constructor(view: WorkbenchView,
               private _formBuilder: NonNullableFormBuilder,
               private _notificationService: WorkbenchNotificationService) {

diff --git a/apps/workbench-client-testing-app/src/app/router-page/router-page.component.html b/apps/workbench-client-testing-app/src/app/router-page/router-page.component.html
@@ -15,18 +15,20 @@
     <header>Navigation Extras</header>
 
     <sci-form-field label="Target">
-      <input [formControl]="form.controls.target" class="e2e-target" list="targets">
-      <datalist id="targets">
+      <input [formControl]="form.controls.target" class="e2e-target" [attr.list]="targetList">
+      <datalist [attr.id]="targetList">
         <option value="auto">auto</option>
         <option value="blank">blank</option>
       </datalist>
     </sci-form-field>
 
-    <sci-form-field label="InsertionIndex">
-      <input [formControl]="form.controls.insertionIndex" list="insertionIndexHints" class="e2e-insertion-index">
-      <datalist id="insertionIndexHints">
+    <sci-form-field label="Position">
+      <input [formControl]="form.controls.position" [attr.list]="positionList" class="e2e-position">
+      <datalist [attr.id]="positionList">
         <option value="start">
         <option value="end">
+        <option value="before-active-view">
+        <option value="after-active-view">
       </datalist>
     </sci-form-field>
 

diff --git a/apps/workbench-client-testing-app/src/app/router-page/router-page.component.ts b/apps/workbench-client-testing-app/src/app/router-page/router-page.component.ts
@@ -18,6 +18,7 @@ import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {parseTypedObject} from '../common/parse-typed-value.util';
 import {CssClassComponent} from '../css-class/css-class.component';
+import {UUID} from '@scion/toolkit/uuid';
 
 @Component({
   selector: 'app-router-page',
@@ -39,13 +40,16 @@ export default class RouterPageComponent {
     qualifier: this._formBuilder.array<FormGroup<KeyValueEntry>>([], Validators.required),
     params: this._formBuilder.array<FormGroup<KeyValueEntry>>([]),
     target: this._formBuilder.control(''),
-    insertionIndex: this._formBuilder.control(''),
+    position: this._formBuilder.control(''),
     activate: this._formBuilder.control<boolean | undefined>(undefined),
     close: this._formBuilder.control<boolean | undefined>(undefined),
     cssClass: this._formBuilder.control<string | string[] | undefined>(undefined),
   });
   public navigateError: string | undefined;
 
+  public targetList = `target-list-${UUID.randomUUID()}`;
+  public positionList = `position-list-${UUID.randomUUID()}`;
+
   constructor(view: WorkbenchView,
               private _formBuilder: NonNullableFormBuilder,
               private _router: WorkbenchRouter) {
@@ -62,7 +66,7 @@ export default class RouterPageComponent {
       activate: this.form.controls.activate.value,
       close: this.form.controls.close.value,
       target: this.form.controls.target.value || undefined,
-      blankInsertionIndex: coerceInsertionIndex(this.form.controls.insertionIndex.value),
+      position: coercePosition(this.form.controls.position.value),
       params: params || undefined,
       cssClass: this.form.controls.cssClass.value,
     };
@@ -72,11 +76,11 @@ export default class RouterPageComponent {
   }
 }
 
-function coerceInsertionIndex(value: any): number | 'start' | 'end' | undefined {
+function coercePosition(value: any): number | 'start' | 'end' | undefined {
   if (value === '') {
     return undefined;
   }
-  if (value === 'start' || value === 'end' || value === undefined) {
+  if (value === 'start' || value === 'end' || value === 'before-active-view' || value === 'after-active-view' || value === undefined) {
     return value;
   }
   return coerceNumberProperty(value);

diff --git a/...pp/src/app/layout-page/register-part-action-page/register-part-action-page.component.html b/...pp/src/app/layout-page/register-part-action-page/register-part-action-page.component.html
@@ -21,22 +21,22 @@
     <header>CanMatch</header>
 
     <sci-form-field label="View(s)">
-      <input [formControl]="form.controls.canMatch.controls.view" class="e2e-view-id" list="views" placeholder="Separate multiple views by space">
-      <datalist id="views">
+      <input [formControl]="form.controls.canMatch.controls.view" class="e2e-view-id" [attr.list]="viewList" placeholder="Separate multiple views by space">
+      <datalist [attr.id]="viewList">
         <option *ngFor="let view of workbenchService.views$ | async" [value]="view.id">{{view.id}}</option>
       </datalist>
     </sci-form-field>
 
     <sci-form-field label="Part(s)">
-      <input [formControl]="form.controls.canMatch.controls.part" class="e2e-part-id" list="parts" placeholder="Separate multiple parts by space">
-      <datalist id="parts">
+      <input [formControl]="form.controls.canMatch.controls.part" class="e2e-part-id" [attr.list]="partList" placeholder="Separate multiple parts by space">
+      <datalist [attr.id]="partList">
         <option *ngFor="let part of workbenchService.parts$ | async" [value]="part.id">{{part.id}}</option>
       </datalist>
     </sci-form-field>
 
     <sci-form-field label="Grid">
-      <input [formControl]="form.controls.canMatch.controls.grid" class="e2e-grid" list="grids">
-      <datalist id="grids">
+      <input [formControl]="form.controls.canMatch.controls.grid" class="e2e-grid" [attr.list]="gridList">
+      <datalist [attr.id]="gridList">
         <option value="">--</option>
         <option value="workbench">Workbench</option>
         <option value="mainArea">Main Area</option>

diff --git a/...-app/src/app/layout-page/register-part-action-page/register-part-action-page.component.ts b/...-app/src/app/layout-page/register-part-action-page/register-part-action-page.component.ts
@@ -19,6 +19,7 @@ import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {Arrays} from '@scion/toolkit/util';
 import {SettingsService} from '../../settings.service';
 import {CssClassComponent} from '../../css-class/css-class.component';
+import {UUID} from '@scion/toolkit/uuid';
 
 @Component({
   selector: 'app-register-part-action-page',
@@ -48,6 +49,10 @@ export default class RegisterPartActionPageComponent {
   });
   public registerError: string | false | undefined;
 
+  protected viewList = `view-list-${UUID.randomUUID()}`;
+  protected partList = `part-list-${UUID.randomUUID()}`;
+  protected gridList = `grid-list-${UUID.randomUUID()}`;
+
   constructor(private _formBuilder: NonNullableFormBuilder,
               private _settingsService: SettingsService,
               public workbenchService: WorkbenchService) {

diff --git a/apps/workbench-testing-app/src/app/layout-page/tables/add-parts/add-parts.component.html b/apps/workbench-testing-app/src/app/layout-page/tables/add-parts/add-parts.component.html
@@ -27,11 +27,11 @@
   }
 </form>
 
-<datalist [id]="idList">
+<datalist [attr.id]="idList">
   <option [value]="MAIN_AREA">{{MAIN_AREA}}</option>
 </datalist>
 
-<datalist [id]="relativeToList">
+<datalist [attr.id]="relativeToList">
   @for (part of partProposals; track part) {
     <option [value]="part">{{part}}</option>
   }

diff --git a/apps/workbench-testing-app/src/app/layout-page/tables/add-views/add-views.component.html b/apps/workbench-testing-app/src/app/layout-page/tables/add-views/add-views.component.html
@@ -25,7 +25,7 @@
   }
 </form>
 
-<datalist [id]="partList">
+<datalist [attr.id]="partList">
   @for (part of partProposals; track part) {
     <option [value]="part">{{part}}</option>
   }

diff --git a/...bench-testing-app/src/app/layout-page/tables/navigate-views/navigate-views.component.html b/...bench-testing-app/src/app/layout-page/tables/navigate-views/navigate-views.component.html
@@ -22,7 +22,7 @@
   }
 </form>
 
-<datalist [id]="viewList">
+<datalist [attr.id]="viewList">
   @for (view of viewProposals; track view) {
     <option [value]="view">{{view}}</option>
   }

diff --git a/...ench-testing-app/src/app/notification-opener-page/notification-opener-page.component.html b/...ench-testing-app/src/app/notification-opener-page/notification-opener-page.component.html
@@ -31,8 +31,8 @@
     </sci-form-field>
 
     <sci-form-field label="Duration">
-      <input [formControl]="form.controls.duration" list="duration" class="e2e-duration">
-      <datalist id="duration">
+      <input [formControl]="form.controls.duration" [attr.list]="durationList" class="e2e-duration">
+      <datalist [attr.id]="durationList">
         <option value="short">short</option>
         <option value="medium">medium</option>
         <option value="long">long</option>

diff --git a/...kbench-testing-app/src/app/notification-opener-page/notification-opener-page.component.ts b/...kbench-testing-app/src/app/notification-opener-page/notification-opener-page.component.ts
@@ -17,6 +17,7 @@ import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {stringifyError} from '../common/stringify-error.util';
 import {NotificationPageComponent} from '../notification-page/notification-page.component';
 import {CssClassComponent} from '../css-class/css-class.component';
+import {UUID} from '@scion/toolkit/uuid';
 
 @Component({
   selector: 'app-notification-opener-page',
@@ -47,6 +48,8 @@ export default class NotificationOpenerPageComponent {
     cssClass: this._formBuilder.control<string | string[] | undefined>(undefined),
   });
 
+  public durationList = `duration-list-${UUID.randomUUID()}`;
+
   constructor(private _formBuilder: NonNullableFormBuilder, private _notificationService: NotificationService) {
   }
 

diff --git a/apps/workbench-testing-app/src/app/notification-page/notification-page.component.html b/apps/workbench-testing-app/src/app/notification-page/notification-page.component.html
@@ -20,8 +20,8 @@
   </sci-form-field>
 
   <sci-form-field label="Duration" direction="column">
-    <input [formControl]="form.controls.duration" list="duration" class="e2e-duration">
-    <datalist id="duration">
+    <input [formControl]="form.controls.duration" [attr.list]="durationList" class="e2e-duration">
+    <datalist [attr.id]="durationList">
       <option value="short">short</option>
       <option value="medium">medium</option>
       <option value="long">long</option>

diff --git a/apps/workbench-testing-app/src/app/notification-page/notification-page.component.ts b/apps/workbench-testing-app/src/app/notification-page/notification-page.component.ts
@@ -18,6 +18,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {filter} from 'rxjs/operators';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {CssClassComponent} from '../css-class/css-class.component';
+import {UUID} from '@scion/toolkit/uuid';
 
 @Component({
   selector: 'app-notification-page',
@@ -42,6 +43,8 @@ export class NotificationPageComponent {
     cssClass: this._formBuilder.control<string | string[] | undefined>(undefined),
   });
 
+  public durationList = `duration-list-${UUID.randomUUID()}`;
+
   constructor(public notification: Notification<Map<string, any>>, private _formBuilder: NonNullableFormBuilder) {
     this.form.controls.title.valueChanges
       .pipe(takeUntilDestroyed())

diff --git a/apps/workbench-testing-app/src/app/router-commands/router-commands.component.html b/apps/workbench-testing-app/src/app/router-commands/router-commands.component.html
@@ -1,6 +1,6 @@
 <input [formControl]="formControl" class="e2e-commands" [attr.list]="routeList" placeholder="path/to/view;a=b;c=d" title="Separate path segments with slash and enter matrix parameters in matrix notation.">
 
-<datalist [id]="routeList">
+<datalist [attr.id]="routeList">
   @for (route of routes; track route) {
     <option [value]="route.path">{{route.path}}</option>
   }

diff --git a/apps/workbench-testing-app/src/app/router-page/router-page.component.html b/apps/workbench-testing-app/src/app/router-page/router-page.component.html
@@ -15,8 +15,8 @@
     <header>Navigation Extras</header>
 
     <sci-form-field label="Target">
-      <input [formControl]="form.controls.target" class="e2e-target" list="targets">
-      <datalist id="targets">
+      <input [formControl]="form.controls.target" class="e2e-target" [attr.list]="targetList">
+      <datalist [attr.id]="targetList">
         <option value="auto">auto</option>
         <option value="blank">blank</option>
       </datalist>
@@ -27,17 +27,19 @@
     </sci-form-field>
 
     <sci-form-field label="Part ID">
-      <input [formControl]="form.controls.partId" class="e2e-part-id" list="parts">
-      <datalist id="parts">
+      <input [formControl]="form.controls.partId" class="e2e-part-id" [attr.list]="partList">
+      <datalist [attr.id]="partList">
         <option *ngFor="let part of workbenchService.parts$ | async" [value]="part.id">{{part.id}}</option>
       </datalist>
     </sci-form-field>
 
-    <sci-form-field label="InsertionIndex">
-      <input [formControl]="form.controls.insertionIndex" list="insertionIndexHints" class="e2e-insertion-index">
-      <datalist id="insertionIndexHints">
+    <sci-form-field label="Position">
+      <input [formControl]="form.controls.position" [attr.list]="positionList" class="e2e-position">
+      <datalist [attr.id]="positionList">
         <option value="start">
         <option value="end">
+        <option value="before-active-view">
+        <option value="after-active-view">
       </datalist>
     </sci-form-field>
 

diff --git a/apps/workbench-testing-app/src/app/router-page/router-page.component.ts b/apps/workbench-testing-app/src/app/router-page/router-page.component.ts
@@ -22,6 +22,7 @@ import {RouterCommandsComponent} from '../router-commands/router-commands.compon
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {parseTypedObject} from '../common/parse-typed-value.util';
 import {CssClassComponent} from '../css-class/css-class.component';
+import {UUID} from '@scion/toolkit/uuid';
 
 @Component({
   selector: 'app-router-page',
@@ -50,7 +51,7 @@ export default class RouterPageComponent {
     target: this._formBuilder.control(''),
     hint: this._formBuilder.control(''),
     partId: this._formBuilder.control(''),
-    insertionIndex: this._formBuilder.control(''),
+    position: this._formBuilder.control(''),
     queryParams: this._formBuilder.array<FormGroup<KeyValueEntry>>([]),
     activate: this._formBuilder.control<boolean | undefined>(undefined),
     close: this._formBuilder.control<boolean | undefined>(undefined),
@@ -62,6 +63,10 @@ export default class RouterPageComponent {
   protected nullViewInjector: Injector;
   protected extras: WorkbenchNavigationExtras = {};
 
+  protected targetList = `target-list-${UUID.randomUUID()}`;
+  protected partList = `part-list-${UUID.randomUUID()}`;
+  protected positionList = `position-list-${UUID.randomUUID()}`;
+
   constructor(private _formBuilder: NonNullableFormBuilder,
               injector: Injector,
               private _wbRouter: WorkbenchRouter,
@@ -101,7 +106,7 @@ export default class RouterPageComponent {
       target: this.form.controls.target.value || undefined,
       hint: this.form.controls.hint.value || undefined,
       partId: this.form.controls.partId.value || undefined,
-      blankInsertionIndex: coerceInsertionIndex(this.form.controls.insertionIndex.value),
+      position: coercePosition(this.form.controls.position.value),
       state: parseTypedObject(SciKeyValueFieldComponent.toDictionary(this.form.controls.state)) ?? undefined,
       cssClass: this.form.controls.cssClass.value,
     };
@@ -116,11 +121,11 @@ export default class RouterPageComponent {
   }
 }
 
-function coerceInsertionIndex(value: any): number | 'start' | 'end' | undefined {
+function coercePosition(value: any): number | 'start' | 'end' | undefined {
   if (value === '') {
     return undefined;
   }
-  if (value === 'start' || value === 'end' || value === undefined) {
+  if (value === 'start' || value === 'end' || value === 'before-active-view' || value === 'after-active-view' || value === undefined) {
     return value;
   }
   return coerceNumberProperty(value);

diff --git a/...p/src/app/test-pages/view-move-dialog-test-page/view-move-dialog-test-page.component.html b/...p/src/app/test-pages/view-move-dialog-test-page/view-move-dialog-test-page.component.html
@@ -1,8 +1,8 @@
 <form autocomplete="off" [formGroup]="form">
   <!-- Workbench ID -->
   <sci-form-field label="Workbench ID" direction="column">
-    <input [formControl]="form.controls.workbenchId" class="e2e-workbench-id" list="target">
-    <datalist id="target">
+    <input [formControl]="form.controls.workbenchId" class="e2e-workbench-id" [attr.list]="targetList">
+    <datalist [attr.id]="targetList">
       <option value="new-window">new-window</option>
     </datalist>
   </sci-form-field>

diff --git a/...app/src/app/test-pages/view-move-dialog-test-page/view-move-dialog-test-page.component.ts b/...app/src/app/test-pages/view-move-dialog-test-page/view-move-dialog-test-page.component.ts
@@ -13,6 +13,7 @@ import {NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {WORKBENCH_ID, WorkbenchDialog, WorkbenchDialogActionDirective, WorkbenchView} from '@scion/workbench';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {UUID} from '@scion/toolkit/uuid';
 
 @Component({
   selector: 'app-view-move-dialog-test-page',
@@ -36,6 +37,8 @@ export class ViewMoveDialogTestPageComponent {
     region: this._formBuilder.control<'north' | 'south' | 'west' | 'east' | ''>(''),
   });
 
+  public targetList = `target-list-${UUID.randomUUID()}`;
+
   constructor(private _formBuilder: NonNullableFormBuilder, private _dialog: WorkbenchDialog) {
     this._dialog.title = 'Move view';
     this.requirePartIfMovingToExistingWindow();

diff --git a/apps/workbench-testing-app/src/app/workbench/workbench.component.html b/apps/workbench-testing-app/src/app/workbench/workbench.component.html
@@ -1,6 +1,6 @@
 <wb-workbench>
   <ng-template wbPartAction [canMatch]="isPartInMainArea" cssClass="e2e-open-new-tab">
-    <button [wbRouterLink]="'/start-page'" [wbRouterLinkExtras]="{target: 'blank', blankInsertionIndex: 'end'}" sciMaterialIcon>
+    <button [wbRouterLink]="'/start-page'" [wbRouterLinkExtras]="{target: 'blank', position: 'end'}" sciMaterialIcon>
       add
     </button>
   </ng-template>

diff --git a/projects/scion/e2e-testing/src/workbench-client/page-object/router-page.po.ts b/projects/scion/e2e-testing/src/workbench-client/page-object/router-page.po.ts
@@ -46,12 +46,12 @@ export class RouterPagePO implements MicrofrontendViewPagePO {
     await keyValueField.addEntries(params);
   }
 
-  public async enterTarget(target?: string | 'blank' | 'auto'): Promise<void> {
+  public async enterTarget(target: string | 'blank' | 'auto' | undefined): Promise<void> {
     await this.locator.locator('input.e2e-target').fill(target ?? '');
   }
 
-  public async enterInsertionIndex(insertionIndex: number | 'start' | 'end' | undefined): Promise<void> {
-    await this.locator.locator('input.e2e-insertion-index').fill(`${insertionIndex}`);
+  public async enterPosition(position: number | 'start' | 'end' | 'before-active-view' | 'after-active-view'): Promise<void> {
+    await this.locator.locator('input.e2e-position').fill(`${position}`);
   }
 
   public async checkActivate(check: boolean): Promise<void> {