feat: enable hotkey drop down for KVM

Author: rsdmike

package-lock.json

@@ -30,7 +30,7 @@
     "@angular/platform-browser": "~20.1.2",
     "@angular/platform-browser-dynamic": "~20.1.2",
     "@angular/router": "~20.1.2",
-    "@device-management-toolkit/ui-toolkit-angular": "^9.1.4",
+    "@device-management-toolkit/ui-toolkit-angular": "^10.1.0",
     "@xterm/xterm": "^5.5.0",
     "@ngx-translate/core": "^16.0.4",
     "@ngx-translate/http-loader": "^16.0.1",

package.json

@@ -10,100 +10,119 @@ import { AuthService } from 'src/app/auth.service'
 import { ToolbarComponent } from './toolbar.component'
 import { BehaviorSubject, of } from 'rxjs'
 import { HttpClient, provideHttpClient } from '@angular/common/http'
-import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
 import { TranslateHttpLoader } from '@ngx-translate/http-loader'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { environment } from 'src/environments/environment'
+
+// Factory function for the TranslateHttpLoader
+function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, '/assets/i18n/', '.json')
+}
 
 describe('ToolbarComponent', () => {
   let component: ToolbarComponent
   let fixture: ComponentFixture<ToolbarComponent>
   let authService: jasmine.SpyObj<AuthService>
-  let getMPSVersionSpy: jasmine.Spy
-  let getRPSVersionSpy: jasmine.Spy
-  // let getConsoleVersionSpy: jasmine.Spy
-  // let logoutSpy: jasmine.Spy
-  let translate: TranslateService
-
-  // Factory function for the TranslateHttpLoader
-  function HttpLoaderFactory(http: HttpClient) {
-    return new TranslateHttpLoader(http, '/assets/i18n/', '.json')
-  }
+  let matDialog: jasmine.SpyObj<MatDialog>
+  let isLoggedInSubject: BehaviorSubject<boolean>
+
   beforeEach(async () => {
+    // Override environment.cloud for testing
+    Object.defineProperty(environment, 'cloud', {
+      writable: true,
+      value: true
+    })
+
+    isLoggedInSubject = new BehaviorSubject<boolean>(false)
+
+    const authServiceSpy = jasmine.createSpyObj(
+      'AuthService',
+      [
+        'logout',
+        'getMPSVersion',
+        'getRPSVersion',
+        'getConsoleVersion',
+        'compareSemver'
+      ],
+      {
+        isLoggedIn: isLoggedInSubject.asObservable(),
+        loggedInSubject$: isLoggedInSubject
+      }
+    )
+
+    authServiceSpy.getMPSVersion.and.returnValue(of({ version: '1.0.0' }))
+    authServiceSpy.getRPSVersion.and.returnValue(of({ version: '1.0.0' }))
+    authServiceSpy.getConsoleVersion.and.returnValue(of({ version: '1.0.0' }))
+    authServiceSpy.compareSemver.and.returnValue(1)
+
+    const matDialogSpy = jasmine.createSpyObj('MatDialog', ['open'])
     const routerSpy = jasmine.createSpyObj('Router', ['navigate'])
-    authService = jasmine.createSpyObj('AuthService', [
-      'logout',
-      'getMPSVersion',
-      'getRPSVersion',
-      'getConsoleVersion'
-    ])
-    getMPSVersionSpy = authService.getMPSVersion.and.returnValue(of({}))
-    getRPSVersionSpy = authService.getRPSVersion.and.returnValue(of({}))
-    // getConsoleVersionSpy = authService.getConsoleVersion.and.returnValue(of({}))
-    const authServiceStub = {
-      loggedInSubject$: new BehaviorSubject<boolean>(true)
-    }
-
-    TestBed.configureTestingModule({
+
+    await TestBed.configureTestingModule({
       imports: [
         ToolbarComponent,
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
-            useFactory: HttpLoaderFactory,
+            useFactory: createTranslateLoader,
             deps: [HttpClient]
           }
         })
       ],
       providers: [
-        { provide: Router, useValue: routerSpy },
-        { provide: AuthService, useValue: { ...authServiceStub, ...authService } },
-        TranslateService,
         provideHttpClient(),
-        provideHttpClientTesting()
-      ]
-    })
+        provideHttpClientTesting(),
+        { provide: AuthService, useValue: authServiceSpy },
+        { provide: MatDialog, useValue: matDialogSpy },
+        { provide: Router, useValue: routerSpy }]
+    }).compileComponents()
+
     fixture = TestBed.createComponent(ToolbarComponent)
     component = fixture.componentInstance
-    translate = TestBed.inject(TranslateService)
-    translate.setDefaultLang('en')
-    fixture.detectChanges()
+    authService = TestBed.inject(AuthService) as jasmine.SpyObj<AuthService>
+    matDialog = TestBed.inject(MatDialog) as jasmine.SpyObj<MatDialog>
   })
 
   afterEach(() => {
     TestBed.resetTestingModule()
-    component.cloudMode = true
   })
 
   it('should create', () => {
+    fixture.detectChanges()
     expect(component).toBeTruthy()
-    expect(component.isLoggedIn).toBeTrue()
-    expect(component.cloudMode).toBeTrue()
   })
 
   it('should display dialog', () => {
-    const dialogSpy = spyOn(TestBed.inject(MatDialog), 'open')
+    fixture.detectChanges()
     component.displayAbout()
-    expect(dialogSpy).toHaveBeenCalled()
+    expect(matDialog.open).toHaveBeenCalled()
   })
 
   it('should logout and redirect to login page', () => {
+    fixture.detectChanges()
     component.logout()
     expect(authService.logout).toHaveBeenCalled()
   })
 
-  it('should call getMPSVersion', () => {
-    expect(component).toBeTruthy()
-    expect(getMPSVersionSpy).toHaveBeenCalled()
+  it('should call getMPSVersion when logged in and cloud mode', () => {
+    fixture.detectChanges()
+    isLoggedInSubject.next(true)
+
+    expect(authService.getMPSVersion).toHaveBeenCalled()
   })
 
-  it('should call getRPSVersion', () => {
-    expect(component).toBeTruthy()
-    expect(getRPSVersionSpy).toHaveBeenCalled()
+  it('should call getRPSVersion when logged in and cloud mode', () => {
+    fixture.detectChanges()
+    isLoggedInSubject.next(true)
+
+    expect(authService.getRPSVersion).toHaveBeenCalled()
   })
 
   it('should subscribe to loggedInSubject on init', () => {
-    component.authService.loggedInSubject$.next(true)
     fixture.detectChanges()
+    isLoggedInSubject.next(true)
+
     expect(component.isLoggedIn).toBeTruthy()
   })
 })

src/app/core/toolbar/toolbar.component.spec.ts

@@ -1,7 +1,7 @@
 <mat-toolbar style="height: 100px" class="flex flex-row">
   <div class="flex flex-50 items-center">
     @if (amtFeatures()?.kvmAvailable) {
-      <mat-form-field style="margin-bottom: 0">
+      <mat-form-field style="margin-bottom: 0; margin-right: 16px">
         <mat-label>Choose encoding type</mat-label>
         <mat-select [(ngModel)]="selected" (ngModelChange)="onEncodingChange($event)">
           @for (encode of encodings; track encode) {
@@ -11,6 +11,17 @@
           }
         </mat-select>
       </mat-form-field>
+      <mat-form-field style="margin-bottom: 0; margin-right: 8px">
+        <mat-label>Hot Keys</mat-label>
+        <mat-select [(ngModel)]="selectedHotkey" placeholder="Select hot key to send">
+          @for (hotkey of hotKeys; track hotkey.value) {
+            <mat-option [value]="hotkey.value">
+              {{ hotkey.label }}
+            </mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <button mat-stroked-button (click)="sendHotkey()" [disabled]="!selectedHotkey">Send</button>
     }
   </div>
   <div class="flex flex-50 justify-end">
@@ -53,16 +64,17 @@
     [deviceId]="deviceId()"
     [mpsServer]="mpsServer"
     [authToken]="authToken()"
-    [deviceConnection]="deviceKVMConnection"
-    [selectedEncoding]="selectedEncoding"
+    [deviceConnection]="deviceKVMConnection()"
+    [selectedEncoding]="selectedEncoding()"
+    [selectedHotkey]="hotKeySignal()"
     (deviceStatus)="deviceKVMStatus($event)"></amt-kvm>
 }
 <amt-ider
   class="ider"
   [deviceId]="deviceId()"
   [mpsServer]="mpsServer"
   [authToken]="authToken()"
-  [deviceConnection]="deviceIDERConnection"
+  [deviceConnection]="deviceIDERConnection()"
   [cdrom]="diskImage"
   [floppy]="null"
   (deviceStatus)="deviceIDERStatus($event)">

src/app/devices/kvm/kvm.component.html

@@ -489,16 +489,49 @@ describe('KvmComponent', () => {
     const mockFile = new File([''], 'test-file.txt', { type: 'text/plain' })
     const mockEvt = { target: { files: [mockFile] } } as unknown as Event
 
-    const deviceIDERConnectioSpy = spyOn(component.deviceIDERConnection, 'emit')
+    const deviceIDERConnectionSpy = spyOn(component.deviceIDERConnection, 'set')
     component.onFileSelected(mockEvt)
 
     expect(component.diskImage).toEqual(mockFile)
-    expect(deviceIDERConnectioSpy).toHaveBeenCalledWith(true)
+    expect(deviceIDERConnectionSpy).toHaveBeenCalledWith(true)
   })
   it('should emit false on canceling IDER', () => {
-    const deviceIDERConnectioSpy = spyOn(component.deviceIDERConnection, 'emit')
+    const deviceIDERConnectionSpy = spyOn(component.deviceIDERConnection, 'set')
     component.onCancelIDER()
 
-    expect(deviceIDERConnectioSpy).toHaveBeenCalledWith(false)
+    expect(deviceIDERConnectionSpy).toHaveBeenCalledWith(false)
+  })
+
+  // Hot Key tests
+  it('should send hotkey when sendHotkey is called with selectedHotkey', () => {
+    const hotKeySignalSpy = spyOn(component.hotKeySignal, 'set')
+    component.selectedHotkey = 'ctrl-alt-del'
+
+    component.sendHotkey()
+
+    expect(hotKeySignalSpy).toHaveBeenCalledWith('ctrl-alt-del')
+  })
+
+  it('should not send hotkey when sendHotkey is called without selectedHotkey', () => {
+    const hotKeySignalSpy = spyOn(component.hotKeySignal, 'set')
+    component.selectedHotkey = null
+
+    component.sendHotkey()
+
+    expect(hotKeySignalSpy).not.toHaveBeenCalled()
+  })
+
+  it('should reset hotkey signal after timeout', (done) => {
+    const hotKeySignalSpy = spyOn(component.hotKeySignal, 'set')
+    component.selectedHotkey = 'ctrl-alt-del'
+
+    component.sendHotkey()
+
+    expect(hotKeySignalSpy).toHaveBeenCalledWith('ctrl-alt-del')
+
+    setTimeout(() => {
+      expect(hotKeySignalSpy).toHaveBeenCalledWith(null)
+      done()
+    }, 150)
   })
 })