feat: Add certificate delete functionality to device management UI (#2969)

- Add deleteCertificate method to DevicesService with DELETE API call
- Implement delete certificate functionality in CertificatesComponent
- Add delete button to certificate list with confirmation dialog
- Integrate AreYouSureDialogComponent for delete confirmation
- Add translation keys for delete tooltip and success/error messages
- Include unit tests for deleteCertificate service method
- Disable delete button for read-only certificates

Resolves certificate management by allowing users to remove certificates
from AMT devices through the web UI with proper confirmation flow.

Signed-off-by: ShradhaGupta31 <[email protected]>
Co-authored-by: Madhavi Losetty <[email protected]>

Author: ShradhaGupta31

src/app/devices/certificates/certificates.component.html

@@ -37,13 +37,22 @@
               {{ cert.associatedProfiles }}
             }
           </span>
-          <button
-            matListItemMeta
-            mat-icon-button
-            [matTooltip]="'certificates.download.tooltip.value' | translate"
-            (click)="downloadCert(cert)">
-            <mat-icon>download</mat-icon>
-          </button>
+          <div matListItemMeta class="flex gap-1">
+            <button
+              mat-icon-button
+              [matTooltip]="'certificates.download.tooltip.value' | translate"
+              (click)="downloadCert(cert)">
+              <mat-icon>download</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              [matTooltip]="'certificates.delete.tooltip.value' | translate"
+              (click)="deleteCertificate(cert)"
+              [disabled]="isLoading() || cert.readOnlyCertificate"
+              class="text-red-500">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
         </mat-list-item>
       }
     }

src/app/devices/certificates/certificates.component.ts

@@ -11,6 +11,7 @@ import { MatSnackBar } from '@angular/material/snack-bar'
 import { MatDialog } from '@angular/material/dialog'
 import { CertInfo } from 'src/models/models'
 import { AddCertDialogComponent } from './add-cert-dialog/add-cert-dialog.component'
+import { AreYouSureDialogComponent } from '../../shared/are-you-sure/are-you-sure.component'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { MatButtonModule, MatIconButton } from '@angular/material/button'
 import { MatTooltip } from '@angular/material/tooltip'
@@ -132,4 +133,34 @@ export class CertificatesComponent implements OnInit {
         this.getCertificates()
       })
   }
+
+  deleteCertificate(cert: any): void {
+    const dialogRef = this.dialog.open(AreYouSureDialogComponent)
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === true) {
+        this.isLoading.set(true)
+        this.devicesService
+          .deleteCertificate(this.deviceId(), cert.instanceID)
+          .pipe(
+            catchError((err) => {
+              this.isLoading.set(false)
+              const msg: string = this.translate.instant('certificates.errorDeletingCertificate.value')
+              this.snackBar.open(msg, undefined, SnackbarDefaults.defaultError)
+              return throwError(err)
+            }),
+            finalize(() => {
+              this.isLoading.set(false)
+            })
+          )
+          .subscribe(() => {
+            const msg: string = this.translate.instant('certificates.deletedSuccessfully.value', {
+              name: cert.displayName
+            })
+            this.snackBar.open(msg, undefined, SnackbarDefaults.defaultSuccess)
+            this.getCertificates()
+          })
+      }
+    })
+  }
 }

src/app/devices/devices.service.spec.ts

@@ -977,6 +977,41 @@ describe('DevicesService', () => {
     })
   })
 
+  describe('deleteCertificate', () => {
+    it('should delete a certificate', () => {
+      const mockResponse = { message: 'Certificate deleted successfully' }
+      const guid = 'test-guid'
+      const instanceId = 'Intel(r) AMT Certificate: Handle: 1'
+
+      service.deleteCertificate(guid, instanceId).subscribe((response) => {
+        expect(response).toEqual(mockResponse)
+      })
+
+      const req = httpMock.expectOne(
+        `${mockEnvironment.mpsServer}/api/v1/amt/certificates/${guid}/${encodeURIComponent(instanceId)}`
+      )
+      expect(req.request.method).toBe('DELETE')
+      req.flush(mockResponse)
+    })
+
+    it('should handle errors when deleting certificate', () => {
+      const mockError = { status: 400, statusText: 'Bad Request' }
+      const guid = 'test-guid'
+      const instanceId = 'Intel(r) AMT Certificate: Handle: 1'
+
+      service.deleteCertificate(guid, instanceId).subscribe({
+        error: (error) => {
+          expect(error.status).toBe(400)
+        }
+      })
+
+      const req = httpMock.expectOne(
+        `${mockEnvironment.mpsServer}/api/v1/amt/certificates/${guid}/${encodeURIComponent(instanceId)}`
+      )
+      req.flush(null, mockError)
+    })
+  })
+
   describe('getDisplaySelection', () => {
     it('should fetch current display selection for a device', () => {
       const mockResponse: DisplaySelectionResponse = {

src/app/devices/devices.service.ts

@@ -550,6 +550,15 @@ export class DevicesService {
       })
     )
   }
+  deleteCertificate(guid: string, instanceId: string): Observable<any> {
+    return this.http
+      .delete<any>(`${environment.mpsServer}/api/v1/amt/certificates/${guid}/${encodeURIComponent(instanceId)}`)
+      .pipe(
+        catchError((err) => {
+          throw err
+        })
+      )
+  }
   getBootSources(guid: string): Observable<BootSource[]> {
     return this.http.get<BootSource[]>(`${environment.mpsServer}/api/v1/amt/power/bootSources/${guid}`).pipe(
       catchError((err) => {

src/assets/i18n/en.json

@@ -420,6 +420,18 @@
     "description": "Indicates the certificate is a root certificate",
     "value": "Root"
   },
+  "certificates.delete.tooltip": {
+    "description": "Tooltip text for delete certificate button",
+    "value": "Delete Certificate"
+  },
+  "certificates.errorDeletingCertificate": {
+    "description": "Error message displayed when certificate deletion fails",
+    "value": "Error deleting certificate"
+  },
+  "certificates.deletedSuccessfully": {
+    "description": "Success message displayed when certificate is deleted",
+    "value": "Certificate '{{name}}' deleted successfully"
+  },
   "common.addNew": {
     "description": "Text for the add new button",
     "value": "Add New"