add autogenerated ID to route and processors

Update npm to v12

.github/dependabot.yml

@@ -1,18 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'weekly'
-    groups:
-      angular:
-        applies-to: version-updates
-        patterns:
-          - '@angular*'
-        update-types:
-          - 'minor'
-          - 'patch'
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'weekly'

.github/workflows/check-webui-build.yml

@@ -9,10 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Set up Node.js
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.github/workflows/publish.yml

@@ -8,10 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Set up Node.js
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.nvmrc

@@ -1 +1 @@
-v24.11.1
+24.19.0

e2e/modules.spec.ts

@@ -1,8 +1,20 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('add module', async ({ page }) => {
   await page.goto('/');
-  await page.locator('app-module-list').getByText('add').click();
+  await page.getByRole('button', { name: 'Add Module' }).click();
   await page.getByRole('menuitem', { name: 'HTTP Server' }).click();
-  // TODO(jwetzell): test that the module gets added
+  const module = page.locator('#modules\\.0');
+  await expect(module).toBeVisible();
+  await expect(module).toContainText('HTTP Server');
+});
+
+test('remove module', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Add Module' }).click();
+  await page.getByRole('menuitem', { name: 'HTTP Server' }).click();
+  const module = page.locator('#modules\\.0');
+  await expect(module).toBeVisible();
+  await module.getByRole('button', { name: 'Delete Module' }).click();
+  await expect(module).not.toBeVisible();
 });

e2e/routes.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+
+test('add route', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Add Route' }).click();
+  await page.getByRole('menuitem', { name: 'HTTP Server' }).click();
+  const route = page.locator('#routes\\.0');
+  await expect(route).toBeVisible();
+  await expect(route).toContainText('Route 0');
+});
+
+test('remove route', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Add Route' }).click();
+  const route = page.locator('#routes\\.0');
+  await expect(route).toBeVisible();
+  await route.getByRole('button', { name: 'Delete Route' }).click();
+  await expect(route).not.toBeVisible();
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@showbridge/webui",
-  "version": "0.14.0",
+  "version": "0.14.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,37 +26,36 @@
     "dist"
   ],
   "license": "MIT",
-  "packageManager": "npm@11.6.2",
+  "packageManager": "npm@12.0.2",
   "dependencies": {
-    "@angular/cdk": "21.2.11",
-    "@angular/common": "21.2.13",
-    "@angular/compiler": "21.2.13",
-    "@angular/core": "21.2.13",
-    "@angular/forms": "21.2.13",
-    "@angular/material": "21.2.11",
-    "@angular/platform-browser": "21.2.13",
-    "@angular/router": "21.2.13",
+    "@angular/cdk": "22.1.2",
+    "@angular/common": "22.1.2",
+    "@angular/compiler": "22.1.2",
+    "@angular/core": "22.1.2",
+    "@angular/forms": "22.1.2",
+    "@angular/material": "22.1.2",
+    "@angular/platform-browser": "22.1.2",
+    "@angular/router": "22.1.2",
     "ajv": "8.20.0",
-    "js-yaml": "4.1.1",
+    "js-yaml": "5.3.0",
     "lodash-es": "4.18.1",
     "rxjs": "7.8.2",
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "21.2.11",
-    "@angular/cli": "21.2.11",
-    "@angular/compiler-cli": "21.2.13",
-    "@angular/material": "21.2.11",
-    "@playwright/test": "1.60.0",
-    "@tailwindcss/postcss": "4.3.0",
+    "@angular/build": "22.1.4",
+    "@angular/cli": "22.1.4",
+    "@angular/compiler-cli": "22.1.2",
+    "@playwright/test": "1.62.1",
+    "@tailwindcss/postcss": "4.3.3",
     "@types/js-yaml": "4.0.9",
     "@types/lodash-es": "4.17.12",
-    "jsdom": "29.1.1",
-    "playwright-ng-schematics": "^21.1.0",
-    "postcss": "8.5.14",
-    "prettier": "3.8.3",
-    "tailwindcss": "4.3.0",
-    "typescript": "5.9.3",
-    "vitest": "4.1.6"
+    "jsdom": "30.0.1",
+    "playwright-ng-schematics": "22.0.3",
+    "postcss": "8.5.26",
+    "prettier": "3.9.6",
+    "tailwindcss": "4.3.3",
+    "typescript": "6.0.3",
+    "vitest": "4.1.11"
   }
-}
+}

playwright.config.ts

@@ -24,9 +24,13 @@ export default defineConfig({
   webServer: [
     {
       name: 'showbridge',
-      command: 'showbridge --config config.yaml',
+      command: 'showbridge --config config.test.yaml',
       url: 'http://localhost:8080/health',
       timeout: 10000,
+      gracefulShutdown: {
+        signal: 'SIGTERM',
+        timeout: 5000,
+      },
     },
   ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -36,6 +40,7 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    video: 'retain-on-failure',
   },
   /* Configure projects for major browsers */
   projects: [

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -29,6 +29,7 @@ import { SettingsService } from './services/settings';
     ConfigPreviewComponent,
   ],
   templateUrl: './app.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './app.css',
 })
 export class App {

src/app/components/array-form/array-form.ts

@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { ParamInfo } from '../../models/form';
@@ -12,6 +12,7 @@ import { parseStringToArray } from '../../utils/params';
   templateUrl: './array-form.html',
   styleUrl: './array-form.css',
   imports: [MatIconModule, FormsModule, CdkDrag, CdkDropList],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class ArrayFormComponent implements OnInit {

src/app/components/config-preview/config-preview.ts

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { Component, computed, input, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -9,6 +9,7 @@ import { Config } from '../../models/config';
   selector: 'app-config-preview',
   imports: [MatIconModule, MatButtonModule, MatTooltipModule],
   templateUrl: './config-preview.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './config-preview.css',
 })
 export class ConfigPreviewComponent {

src/app/components/module-list/module-list.html

@@ -5,6 +5,8 @@
         matTooltip="Add Module"
         class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
         [matMenuTriggerFor]="addModuleMenu"
+        role="button"
+        aria-label="Add Module"
       >
         <mat-icon>add</mat-icon>
       </div>
@@ -27,6 +29,7 @@
     @for (module of modules(); track module.id; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-module
+          [id]="listService.pathToId(`modules/${i}`)"
           [path]="`modules/${i}`"
           [module]="module"
           (updated)="moduleUpdated(i, $event)"

src/app/components/module-list/module-list.ts

@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, inject, input, output } from '@angular/core';
+import { Component, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -7,6 +7,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { cloneDeep } from 'lodash-es';
 import { ModuleConfig } from '../../models/config';
+import { ListsService } from '../../services/lists';
 import { SchemaService } from '../../services/schema';
 import { ModuleComponent } from '../module/module';
 
@@ -22,12 +23,14 @@ import { ModuleComponent } from '../module/module';
     CdkDropList,
   ],
   templateUrl: './module-list.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './module-list.css',
 })
 export class ModuleListComponent {
   modules = input<ModuleConfig[]>();
   updated = output<ModuleConfig[]>();
   public schemaService = inject(SchemaService);
+  public listService = inject(ListsService);
 
   private snackBar = inject(MatSnackBar);
 
@@ -73,7 +76,6 @@ export class ModuleListComponent {
   }
 
   drop(event: CdkDragDrop<ModuleConfig[] | undefined>) {
-    console.log('Drop event:', event);
     if (event.previousContainer === event.container) {
       const currentModules = this.modules();
       if (currentModules === undefined) {

src/app/components/module/module.html

@@ -28,6 +28,8 @@
       <div
         class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
         (click)="delete.emit()"
+        role="button"
+        aria-label="Delete Module"
       >
         <mat-icon class="text-red-500!">close</mat-icon>
       </div>

src/app/components/module/module.ts

@@ -1,6 +1,14 @@
 import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
-import { Component, computed, inject, input, output, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -29,6 +37,7 @@ import { ParamsFormComponent } from '../params-form/params-form';
     CdkDragPlaceholder,
   ],
   templateUrl: './module.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './module.css',
 })
 export class ModuleComponent {

src/app/components/params-form/params-form.ts

@@ -1,5 +1,12 @@
 import { JsonPipe } from '@angular/common';
-import { Component, effect, input, OnDestroy, output } from '@angular/core';
+import {
+  Component,
+  effect,
+  input,
+  OnDestroy,
+  output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -26,6 +33,7 @@ import { ArrayFormComponent } from '../array-form/array-form';
     ArrayFormComponent,
     MatTabsModule,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class ParamsFormComponent implements OnDestroy {

src/app/components/processor/processor.ts

@@ -1,5 +1,5 @@
 import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
-import { Component, computed, inject, input, output } from '@angular/core';
+import { Component, computed, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { ProcessorConfig } from '../../models/config';
@@ -17,6 +17,7 @@ import { ParamsFormComponent } from '../params-form/params-form';
     CdkDragPlaceholder,
   ],
   templateUrl: './processor.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './processor.css',
 })
 export class ProcessorComponent {

src/app/components/route-list/route-list.html

@@ -4,6 +4,8 @@
       matTooltip="Add Route"
       class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
       (click)="addRoute()"
+      role="button"
+      aria-label="Add Route"
     >
       <mat-icon>add</mat-icon>
     </div>
@@ -15,9 +17,10 @@
     (cdkDropListDropped)="drop($event)"
     [cdkDropListData]="routes()"
   >
-    @for (route of routes(); track route; let i = $index) {
+    @for (route of routes(); track route.id; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-route
+          [id]="listService.pathToId(`routes/${i}`)"
           [path]="`routes/${i}`"
           (updated)="routeUpdated(i, $event)"
           [route]="route"

src/app/components/route-list/route-list.ts

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
   transferArrayItem,
 } from '@angular/cdk/drag-drop';
-import { Component, inject, input, output } from '@angular/core';
+import { Component, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -14,6 +14,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { cloneDeep } from 'lodash-es';
 import { RouteConfig } from '../../models/config';
+import { ListsService } from '../../services/lists';
 import { SchemaService } from '../../services/schema';
 import { RouteComponent } from '../route/route';
 
@@ -30,6 +31,7 @@ import { RouteComponent } from '../route/route';
     A11yModule,
   ],
   templateUrl: './route-list.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './route-list.css',
 })
 export class RouteListComponent {
@@ -37,6 +39,7 @@ export class RouteListComponent {
   moduleIds = input<string[]>();
   updated = output<RouteConfig[]>();
   public schemaService = inject(SchemaService);
+  public listService = inject(ListsService);
 
   private snackBar = inject(MatSnackBar);
 
@@ -121,7 +124,6 @@ export class RouteListComponent {
   }
 
   drop(event: CdkDragDrop<RouteConfig[] | undefined>) {
-    console.log('Drop event:', event);
     if (event.previousContainer === event.container) {
       const currentRoutes = this.routes();
       if (currentRoutes === undefined) {

src/app/components/route/route.html

@@ -23,6 +23,8 @@
       <div
         class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
         (click)="delete.emit()"
+        role="button"
+        aria-label="Delete Route"
       >
         <mat-icon class="text-red-500!">close</mat-icon>
       </div>
@@ -79,7 +81,7 @@
             (cdkDropListDropped)="drop($event)"
             [cdkDropListData]="route()?.processors"
           >
-            @for (processor of processors(); track processor; let i = $index) {
+            @for (processor of processors(); track processor.id; let i = $index) {
               <div cdkDrag>
                 <app-processor
                   [path]="path() + '/processors/' + i"
@@ -235,7 +237,7 @@
               (cdkDropListDropped)="drop($event)"
               [cdkDropListData]="route()?.processors"
             >
-              @for (processor of processors(); track processor; let i = $index) {
+              @for (processor of processors(); track processor.id; let i = $index) {
                 <div cdkDrag>
                   <app-processor
                     [path]="path() + '/processors/' + i"

src/app/components/route/route.ts

@@ -1,13 +1,22 @@
 import {
   CdkDrag,
   CdkDragDrop,
+  CdkDragHandle,
   CdkDragPlaceholder,
   CdkDragPreview,
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
-import { Component, computed, inject, input, output, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -34,11 +43,13 @@ import { ProcessorComponent } from '../processor/processor';
     ProcessorComponent,
     MatTooltipModule,
     CdkDrag,
+    CdkDragHandle,
     CdkDropList,
     CdkDragPreview,
     CdkDragPlaceholder,
   ],
   templateUrl: './route.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './route.css',
 })
 export class RouteComponent {

src/app/models/config.ts

@@ -22,11 +22,13 @@ export type ModuleConfig = {
 };
 
 export type RouteConfig = {
+  id: string;
   input?: string;
   processors?: ProcessorConfig[];
 };
 
 export type ProcessorConfig = {
+  id: string;
   type: string;
   params?: Record<string, any>;
 };

src/app/services/config.ts

@@ -17,17 +17,18 @@ import { SettingsService } from './settings';
 })
 export class ConfigService {
   pendingConfigIsValid = computed(() => {
-    const config = this.currentlyShownConfig();
+    const config = this._currentlyShownConfig();
     if (config === undefined) {
       return false;
     }
     return this.schemaService.validate(this.schemaService.configSchemaId, config);
   });
-  currentlyShownConfig = signal<Config | undefined>(undefined);
-  runningConfig = signal<Config | undefined>(undefined);
+  private runningConfig = signal<Config | undefined>(undefined);
+  private _currentlyShownConfig = signal<Config | undefined>(undefined);
+  readonly currentlyShownConfig = this._currentlyShownConfig.asReadonly();
 
   configIsDirty = computed(() => {
-    const currentlyShown = this.currentlyShownConfig();
+    const currentlyShown = this._currentlyShownConfig();
     const running = this.runningConfig();
     if (currentlyShown === undefined || running === undefined) {
       return false;
@@ -44,7 +45,7 @@ export class ConfigService {
 
   constructor(private schemaService: SchemaService) {
     effect(() => {
-      console.log('config state changed', this.currentlyShownConfig());
+      console.log('config state changed', this._currentlyShownConfig());
     });
 
     effect(() => {
@@ -124,36 +125,29 @@ export class ConfigService {
   }
 
   updateCurrentlyShownConfig(config: Config) {
-    if (isEqual(config, this.currentlyShownConfig())) {
-      // NOTE(jwetzell): no update
-      return;
-    }
-    this.currentlyShownConfig.set(cloneDeep(config));
+    this._currentlyShownConfig.set(cloneDeep(config));
   }
 
   updateModules(modules: ModuleConfig[]) {
-    const currentConfig = this.currentlyShownConfig();
-    if (!currentConfig) {
+    var newConfig = cloneDeep(this._currentlyShownConfig());
+    if (!newConfig) {
       console.error('No currently shown config to update modules on');
       return;
     }
+    newConfig.modules = cloneDeep(modules);
 
-    this.currentlyShownConfig.set({
-      ...currentConfig,
-      modules: modules,
-    });
+    this.updateCurrentlyShownConfig(newConfig);
   }
 
   updateRoutes(routes: RouteConfig[]) {
-    const currentConfig = this.currentlyShownConfig();
+    const currentConfig = this._currentlyShownConfig();
     if (!currentConfig) {
       console.error('No currently shown config to update routes on');
       return;
     }
 
-    this.currentlyShownConfig.set({
-      ...currentConfig,
-      routes: routes,
-    });
+    currentConfig.routes = cloneDeep(routes);
+
+    this.updateCurrentlyShownConfig(currentConfig);
   }
 }

src/app/services/schema.ts

@@ -139,12 +139,16 @@ export class SchemaService {
   }
 
   getSkeletonForRoute(): RouteConfig {
-    const template: RouteConfig = {};
+    const template: RouteConfig = {
+      id: crypto.randomUUID(),
+      processors: [],
+    };
     return template;
   }
 
   getSkeletonForProcessor(processorType: string): ProcessorConfig {
     const template: ProcessorConfig = {
+      id: crypto.randomUUID(),
       type: processorType,
     };
     const itemInfo = this.processorTypes.find((itemInfo) => itemInfo.type === processorType);

tsconfig.app.json

@@ -7,5 +7,13 @@
     "types": []
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts"]
+  "exclude": ["src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }