2 files changed, 38 insertions, 17 deletions
diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html
index 0c2787c..2edc0d3 100644
--- a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html
+++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html
@@ -3,10 +3,10 @@
 
     <div class="row">
       <div class="col-12 col-md-8">
-        {{ labelGet(sdk) }}
+        {{ sdk.name }}
       </div>
       <div class="col-6 col-md-4 text-right" role="group">
-        <button class="btn btn-outline-danger btn-tn btn-xds" (click)="delete(sdk)">
+        <button class="btn btn-outline-danger btn-tn btn-xds" (click)="remove(sdk)">
           <span class="fa fa-trash fa-size-x2"></span>
         </button>
       </div>
@@ -24,19 +24,24 @@
           <td>{{ sdk.id }}</td>
         </tr>
         <tr>
+          <th><span class="fa fa-fw fa-file-text-o"></span>&nbsp;<span>Description</span></th>
+          <td>{{ sdk.description }}</td>
+        </tr>
+        <tr>
           <th><span class="fa fa-fw fa-user"></span>&nbsp;<span>Profile</span></th>
           <td>{{ sdk.profile }}</td>
-        </tr>            <tr>
-            <th><span class="fa fa-fw fa-tasks"></span>&nbsp;<span>Architecture</span></th>
-            <td>{{ sdk.arch }}</td>
         </tr>
         <tr>
-            <th><span class="fa fa-fw fa-code-fork"></span>&nbsp;<span>Version</span></th>
-            <td>{{ sdk.version }}</td>
+          <th><span class="fa fa-fw fa-tasks"></span>&nbsp;<span>Architecture</span></th>
+          <td>{{ sdk.arch }}</td>
+        </tr>
+        <tr>
+          <th><span class="fa fa-fw fa-code-fork"></span>&nbsp;<span>Version</span></th>
+          <td>{{ sdk.version }}</td>
         </tr>
         <tr>
-            <th><span class="fa fa-fw fa-folder-open-o"></span>&nbsp;<span>Sdk path</span></th>
-            <td>{{ sdk.path}}</td>
+          <th><span class="fa fa-fw fa-folder-open-o"></span>&nbsp;<span>Sdk path</span></th>
+          <td>{{ sdk.path}}</td>
         </tr>
       </tbody>
     </table>
diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts
index d41e2fb..997f01d 100644
--- a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts
+++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts
@@ -20,6 +20,8 @@ import { Component, Input, Pipe, PipeTransform } from '@angular/core';
 import { SdkService, ISdk } from '../../../@core-xds/services/sdk.service';
 import { AlertService } from '../../../@core-xds/services/alert.service';
 
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmModalComponent, EType } from '../../confirm/confirm-modal/confirm-modal.component';
 
 @Component({
   selector: 'xds-sdk-card',
@@ -36,18 +38,32 @@ export class SdkCardComponent {
   constructor(
     private alert: AlertService,
     private sdkSvr: SdkService,
+    private modalService: NgbModal,
   ) {
   }
 
-  labelGet(sdk: ISdk) {
-    return sdk.profile + '-' + sdk.arch + '-' + sdk.version;
-  }
+  remove(sdk: ISdk) {
+    const modal = this.modalService.open(ConfirmModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      container: 'nb-layout',
+    });
+    modal.componentInstance.title = 'Confirm SDK deletion';
+    modal.componentInstance.type = EType.YesNo;
+    modal.componentInstance.question = `
+    Do you <b>permanently remove '` + sdk.name + `'</b> SDK ?
+    <br><br>
+    <i><small>(SDK ID: ` + sdk.id + ` )</small></i>`;
 
-  delete(sdk: ISdk) {
-    this.sdkSvr.delete(sdk).subscribe(
-      res => { },
-      err => this.alert.error('ERROR delete: ' + err),
-    );
+    modal.result
+      .then(res => {
+        if (res === 'yes') {
+          this.sdkSvr.remove(sdk).subscribe(
+            r => { },
+            err => this.alert.error(err),
+          );
+        }
+      });
   }
 }