-Delete uploaded files

-Show confirmation modal before delete any file

- disable import button until the user select a file

Issue-ID: CCSDK-2346

Signed-off-by: AhmedEldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I5c76765b045cfbe0b71083e5c06faa40881c2b8e

2 files changed, 16 insertions, 9 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index 79c444061..159f7aec4 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -20,12 +20,12 @@
             <div class="card">
                 <div [id]="'head-script-'+mapIndex" class="card-header">
                     <h5 class="mb-0 d-flex justify-content-between">
-                        <button (click)="changeDivShow(mapIndex)"
-                            aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse">
+                        <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed"
+                            data-toggle="collapse">
                             <i class="icon-file-code"></i> {{file.key}}
                         </button>
-                        <a data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
-                                class="icon-delete-sm"></i></a>
+                        <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
+                            class="accordion-delete"><i class="icon-delete-sm"></i></a>
                         <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
                                     class="icon-delete-sm"></i></a> -->
                         <!-- Delete Modal -->
@@ -40,12 +40,14 @@
                                         </button>
                                     </div>
                                     <div class="modal-body">
-                                        <p>Are you sure you want to delete script file <span>ConfigDeploy.py</span>?</p>
+                                        <p>Are you sure you want to delete script file
+                                            <span>{{fileToDelete?.key?.split('/')[2]}}</span>?</p>
                                     </div>
                                     <div class="modal-footer">
                                         <button type="button" class="btn btn-secondary"
                                             data-dismiss="modal">Cancel</button>
-                                        <button type="button" class="btn btn-primary">Delete</button>
+                                        <button type="button" (click)="removeFile(fileToDelete?.key,0)"
+                                            data-dismiss="modal" class="btn btn-primary">Delete</button>
                                     </div>
                                 </div>
                             </div>
@@ -114,10 +116,11 @@
                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
                     type="button">Cancel
                 </button>
-                <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
+                <button (click)="setFilesToStore()" [disabled]="uploadedFiles?.length<=0" class="btn btn-sm btn-primary"
+                    data-dismiss="modal" type="button">
                     Import
                 </button>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
index efe28e9a4..a85ccf146 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
@@ -3,6 +3,7 @@ import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 import { PackageCreationStore } from '../package-creation.store';
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/webpack-resolver';
+declare var $: any;
 
 @Component({
     selector: 'app-scripts-tab',
@@ -15,6 +16,7 @@ export class ScriptsTabComponent implements OnInit {
     public uploadedFiles: FileSystemFileEntry[] = [];
     public files: NgxFileDropEntry[] = [];
     private fileNames: Set<string> = new Set();
+    fileToDelete: any = {};
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -42,7 +44,9 @@ export class ScriptsTabComponent implements OnInit {
             }
         }
     }
-
+    initDelete(file) {
+        this.fileToDelete = file;
+    }
     removeFile(filePath: string, FileIndex: number) {
         const filename = filePath.split('/')[2] || '';
         //  const filename = 'Scripts/' + this.getFileType(this.uploadedFiles[fileIndex].name) + '/' + this.uploadedFiles[fileIndex].name;