-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
(cherry picked from commit fec3bb773795d769d83cf1891879781b527a5d53)

4 files changed, 65 insertions, 46 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index ac02c50e2..d487de3d1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -36,38 +36,39 @@
             <div class="card">
                 <div class="card-header" [id]="'head-'+mapIndex">
                     <h5 class="mb-0 d-flex justify-content-between">
-                        <button class="btn btn-link " data-toggle="collapse"
-                                aria-expanded="false"
-                            (click)="changeDivShow(mapIndex)" >
+                        <button class="btn btn-link " data-toggle="collapse" aria-expanded="false"
+                            (click)="changeDivShow(mapIndex)">
                             <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 class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> -->
-                    <!-- Delete Modal -->
-                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
-                        aria-labelledby="exampleModalLabel" aria-hidden="true">
-                        <div class="modal-dialog" role="document">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <h5 class="modal-title" id="exampleModalLabel">Delete File</h5>
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                        <span aria-hidden="true">&times;</span>
-                                    </button>
-                                </div>
-                                <div class="modal-body">
-                                    <p>Are you sure you want to delete file <span>artifact_types.json</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>
+
+                        <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
+                            class="accordion-delete"><i class="icon-delete-sm"></i></a>
+
+                        <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> -->
+                        <!-- Delete Modal -->
+                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
+                            aria-labelledby="exampleModalLabel" aria-hidden="true">
+                            <div class="modal-dialog" role="document">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h5 class="modal-title" id="exampleModalLabel">Delete File</h5>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <p>Are you sure you want to delete file
+                                            <span>{{fileToDelete?.key?.split('/')[1]}}</span>?</p>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary"
+                                            data-dismiss="modal">Cancel</button>
+                                        <button type="button" data-dismiss="modal" (click)="removeFile()"
+                                            class="btn btn-primary">Delete</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
                     </h5>
                 </div>
                 <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
@@ -153,7 +154,8 @@
                 <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
                     (click)="resetTheUploadedFiles()">Cancel
                 </button>
-                <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()">
+                <button type="button" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0"
+                    data-dismiss="modal" (click)="setFilesToStore()">
                     Import
                 </button>
             </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 35c0918de..9858fd580 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
-import {PackageCreationStore} from '../package-creation.store';
-import {PackageCreationUtils} from '../package-creation.utils';
+import { Component, OnInit } from '@angular/core';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../package-creation.store';
+import { PackageCreationUtils } from '../package-creation.utils';
 
 
 @Component({
@@ -14,7 +14,7 @@ export class ImportsTabComponent implements OnInit {
     public definitionFiles: Map<string, string> = new Map<string, string>();
     public uploadedFiles: FileSystemFileEntry[] = [];
     private fileNames: Set<string> = new Set();
-
+    fileToDelete: any = {};
     public files: NgxFileDropEntry[] = [];
 
     constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
@@ -40,11 +40,21 @@ export class ImportsTabComponent implements OnInit {
             }
         }
     }
-
-    removeFile(fileIndex: number) {
-        const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name;
+    initDelete(file) {
+        console.log(file);
+        this.fileToDelete = file;
+    }
+    removeFile() {
+        const filename = this.fileToDelete.key;
         this.packageCreationStore.removeFileFromDefinition(filename);
-        this.uploadedFiles.splice(fileIndex, 1);
+
+        for (let i = 0; i < this.uploadedFiles.length; i++) {
+            console.log(this.uploadedFiles[i]);
+            if (this.uploadedFiles[i].name === filename) {
+                this.uploadedFiles.splice(i, 1);
+                break;
+            }
+        }
     }
 
     public fileOver(event) {
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;