feat: add more to IDER tab

Author: nmgaston

src/app/devices/ider/ider.component.html

@@ -1,16 +1,66 @@
-<mat-toolbar style="height: 100px" class="flex flex-row">
-  <div class="flex flex-50 justify-end">
-    <button mat-flat-button color="primary" (click)="fileInput.click()">
-      <mat-icon>upload_file</mat-icon>{{ 'ider.attachDisk.label.value' | translate }}
+<mat-toolbar class="flex flex-row ider-toolbar">
+  <div class="ider-status" [class.active]="isIDERActive()" [class.loading]="isLoading()">
+    <mat-icon>
+      @if (isLoading()) {
+        sync
+      } @else if (isIDERActive()) {
+        check_circle
+      } @else {
+        radio_button_unchecked
+      }
+    </mat-icon>
+    <div class="ider-status-copy">
+      <div class="ider-status-title">
+        @if (isIDERActive()) {
+          {{ 'warning.iderActive.value' | translate }}
+        } @else if (isLoading() && loadingStatus()) {
+          {{ loadingStatus() | translate }}
+        } @else {
+          {{ 'ider.status.notConnected.value' | translate }}
+        }
+      </div>
+      @if (!isIDERActive() && !isLoading()) {
+        <div class="ider-status-subtitle">{{ 'ider.status.attachHelp.value' | translate }}</div>
+      }
+    </div>
+  </div>
+
+  <div class="ider-actions">
+    <button
+      mat-flat-button
+      color="primary"
+      [disabled]="isLoading() || isIDERActive()"
+      (click)="onAttachDiskImage(fileInput)">
+      <mat-icon [class.loading-icon]="isLoading()">
+        @if (isLoading()) {
+          sync
+        } @else {
+          upload_file
+        }</mat-icon
+      >{{ 'ider.attachDisk.label.value' | translate }}
     </button>
-    <input hidden (change)="onFileSelected($event)" #fileInput type="file" id="file" accept=".iso, .img" />
+    <input hidden (change)="onFileSelected($event)" #fileInput type="file" id="file" accept=".iso" />
     @if (isIDERActive()) {
       <button mat-flat-button color="warn" (click)="onCancelIDER()" class="stop-ider-button">
         <mat-icon>stop</mat-icon>{{ 'ider.stopIder.label.value' | translate }}
       </button>
     }
   </div>
 </mat-toolbar>
+
+@if (isLoading() && deviceState() !== 2) {
+  <div class="loading-container">
+    <div class="loading-status">{{ loadingStatus() | translate }}</div>
+  </div>
+}
+
+@if (!diskImage && !isLoading()) {
+  <div class="ider-empty-state">
+    <mat-icon>dns</mat-icon>
+    <p>{{ 'ider.emptyState.selectIso.value' | translate }}</p>
+  </div>
+}
+
 @if (diskImage && deviceIDERConnection()) {
   <amt-ider
     class="ider"

src/app/devices/ider/ider.component.scss

@@ -1,23 +1,94 @@
 .canvas {
   background-color: black;
 }
+.ider-toolbar {
+  min-height: 96px;
+  height: auto;
+  gap: 16px;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.ider-status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #f5f7fa;
+}
+.ider-status mat-icon {
+  color: #616161;
+}
+.ider-status.loading mat-icon {
+  color: #1976d2;
+  animation: spin 1.5s linear infinite;
+}
+.ider-status.active mat-icon {
+  color: #2e7d32;
+}
+.ider-status-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ider-status-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.87);
+}
+.ider-status-subtitle {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.ider-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.ider-actions .loading-icon {
+  animation: spin 1.5s linear infinite;
+}
 .loading-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin: 12px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
 }
 .loading-status {
   color: rgba(0, 0, 0, 0.87);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
-  margin-top: 8px;
 }
 .stop-ider-button {
   margin-inline-start: 8px;
 }
+.ider-empty-state {
+  margin-top: 16px;
+  border: 1px dashed rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  text-align: center;
+}
+.ider-empty-state mat-icon {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/app/devices/ider/ider.component.spec.ts

@@ -148,12 +148,27 @@ describe('IderComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy()
     fixture.detectChanges()
-    expect(tokenSpy).toHaveBeenCalled()
-    expect(getPowerStateCachedSpy).toHaveBeenCalled()
+    expect(tokenSpy).not.toHaveBeenCalled()
+    expect(getPowerStateCachedSpy).not.toHaveBeenCalled()
     expect(getAMTFeaturesCachedSpy).toHaveBeenCalled()
     expect(getPowerStateSpy).not.toHaveBeenCalled()
     expect(getAMTFeaturesSpy).not.toHaveBeenCalled()
-    expect(getRedirectionStatusSpy).toHaveBeenCalled()
+    expect(getRedirectionStatusSpy).not.toHaveBeenCalled()
+  })
+
+  it('prompts to enable IDER on tab load when IDER is disabled', () => {
+    getAMTFeaturesCachedSpy.and.returnValue(
+      of({
+        ...amtFeaturesResponse,
+        IDER: false,
+        redirection: true
+      })
+    )
+
+    fixture.detectChanges()
+
+    expect(dialogSpy.open).toHaveBeenCalled()
+    expect(setAmtFeaturesSpy).toHaveBeenCalled()
   })
 
   it('should set isDisconnecting to true on NavigationStart event', () => {
@@ -223,9 +238,25 @@ describe('IderComponent', () => {
     })
   })
 
+  it('postUserConsentDecision short-circuits when file selection was canceled', (done) => {
+    tokenSpy.calls.reset()
+    ;(component as any).diskSelectionCanceled = true
+    component.isLoading.set(true)
+    component.loadingStatus.set('ider.status.connectingIder.value')
+
+    component.postUserConsentDecision(true).subscribe((result) => {
+      expect(result).toBeNull()
+      expect(component.isLoading()).toBeFalse()
+      expect(component.loadingStatus()).toBe('')
+      expect(tokenSpy).not.toHaveBeenCalled()
+      expect((component as any).diskSelectionCanceled).toBeFalse()
+      done()
+    })
+  })
+
   it('init runs consent handlers and refreshes token after consent success', () => {
     tokenSpy.calls.reset()
-    fixture.detectChanges()
+    component.connect()
     expect(component.loadingStatus()).toBe('ider.status.connectingIder.value')
     expect(userConsentService.handleUserConsentDecision).toHaveBeenCalledWith(
       true,
@@ -236,6 +267,21 @@ describe('IderComponent', () => {
     expect(tokenSpy.calls.count()).toBe(1)
   })
 
+  it('init stops before consent handlers when enabling IDER is declined', () => {
+    tokenSpy.calls.reset()
+    userConsentService.handleUserConsentDecision.calls.reset()
+    userConsentService.handleUserConsentResponse.calls.reset()
+    spyOn(component, 'handleAMTFeaturesResponse').and.returnValue(of(false))
+
+    component.connect()
+
+    expect(userConsentService.handleUserConsentDecision).not.toHaveBeenCalled()
+    expect(userConsentService.handleUserConsentResponse).not.toHaveBeenCalled()
+    expect(component.isLoading()).toBeFalse()
+    expect(component.loadingStatus()).toBe('')
+    expect(tokenSpy.calls.count()).toBe(1)
+  })
+
   it('postUserConsentDecision does not issue a duplicate AMT features fetch', (done) => {
     getAMTFeaturesSpy.calls.reset()
     getAMTFeaturesCachedSpy.calls.reset()
@@ -477,13 +523,109 @@ describe('IderComponent', () => {
     expect(component.diskImage).toBeNull()
   })
 
+  it('onAttachDiskImage starts connection and opens file picker', () => {
+    const connectSpy = spyOn(component, 'connect')
+    const mockFileInput = jasmine.createSpyObj('HTMLInputElement', ['click']) as HTMLInputElement
+    mockFileInput.value = 'existing.iso'
+
+    component.onAttachDiskImage(mockFileInput)
+
+    expect(mockFileInput.value).toBe('')
+    expect(connectSpy).toHaveBeenCalled()
+    expect(mockFileInput.click).toHaveBeenCalled()
+  })
+
+  it('onFileSelected does not start connection when a file is selected during active attach flow', () => {
+    const connectSpy = spyOn(component, 'connect')
+    const mockFile = new File([''], 'test-file.iso', { type: 'application/octet-stream' })
+    const mockEvt = { target: { files: [mockFile] } } as unknown as Event
+    component.isLoading.set(true)
+
+    component.onFileSelected(mockEvt)
+
+    expect(connectSpy).not.toHaveBeenCalled()
+  })
+
+  it('onFileSelected does not start connection when file selection is canceled', () => {
+    const connectSpy = spyOn(component, 'connect')
+    component.isLoading.set(true)
+    component.loadingStatus.set('ider.status.connectingIder.value')
+    const mockEvt = { target: { files: [] } } as unknown as Event
+
+    component.onFileSelected(mockEvt)
+
+    expect(component.diskImage).toBeNull()
+    expect(component.deviceIDERConnection()).toBeFalse()
+    expect(component.isLoading()).toBeFalse()
+    expect(component.loadingStatus()).toBe('')
+    expect(connectSpy).not.toHaveBeenCalled()
+  })
+
+  it('onAttachDiskImage ignores clicks while loading', () => {
+    const connectSpy = spyOn(component, 'connect')
+    const mockFileInput = jasmine.createSpyObj('HTMLInputElement', ['click']) as HTMLInputElement
+    component.isLoading.set(true)
+
+    component.onAttachDiskImage(mockFileInput)
+
+    expect(connectSpy).not.toHaveBeenCalled()
+    expect(mockFileInput.click).not.toHaveBeenCalled()
+  })
+
+  it('onAttachDiskImage warns and does not reconnect when IDER is already active', () => {
+    const connectSpy = spyOn(component, 'connect')
+    const mockFileInput = jasmine.createSpyObj('HTMLInputElement', ['click']) as HTMLInputElement
+    component.isIDERActive.set(true)
+
+    component.onAttachDiskImage(mockFileInput)
+
+    expect(displayWarningSpy).toHaveBeenCalledWith('ider.alreadyActiveWarning.value')
+    expect(connectSpy).not.toHaveBeenCalled()
+    expect(mockFileInput.click).not.toHaveBeenCalled()
+  })
+
+  it('onAttachDiskImage clears loading when picker closes without selecting a file', () => {
+    const connectSpy = spyOn(component, 'connect')
+    const mockFileInput = jasmine.createSpyObj('HTMLInputElement', ['click']) as HTMLInputElement
+
+    component.onAttachDiskImage(mockFileInput)
+    component.isLoading.set(true)
+    component.loadingStatus.set('ider.status.connectingIder.value')
+
+    window.dispatchEvent(new Event('focus'))
+
+    expect(connectSpy).toHaveBeenCalled()
+    expect(component.diskImage).toBeNull()
+    expect(component.isLoading()).toBeFalse()
+    expect(component.loadingStatus()).toBe('')
+  })
+
+  it('disables the Attach button when IDER is already active', () => {
+    component.isIDERActive.set(true)
+    fixture.detectChanges()
+
+    const attachButton = fixture.nativeElement.querySelector('button[color="primary"]') as HTMLButtonElement
+
+    expect(attachButton.disabled).toBeTrue()
+  })
+
   // onCancelIDER()
   it('should set deviceIDERConnection to false on cancel IDER', () => {
     const deviceIDERConnectionSpy = spyOn(component.deviceIDERConnection, 'set')
     component.onCancelIDER()
     expect(deviceIDERConnectionSpy).toHaveBeenCalledWith(false)
   })
 
+  it('should clear loading state on cancel IDER', () => {
+    component.isLoading.set(true)
+    component.loadingStatus.set('ider.status.connectingIder.value')
+
+    component.onCancelIDER()
+
+    expect(component.isLoading()).toBeFalse()
+    expect(component.loadingStatus()).toBe('')
+  })
+
   it('should clear file input value on cancel IDER', () => {
     const mockFileInput = document.createElement('input')
     mockFileInput.id = 'file'