1. Improve progress bar and I used common progress bar.

2.  Added cancel button
3. And modified the unit test cases

src/app/common/uploading-processbar/uploading-processbar.component.html

@@ -1,4 +1,4 @@
-    <p>Image Uploading please wait .... {{uploadProgress}}%</p>
+    <p>{{upload_file_type}} Uploading please wait .... {{uploadProgress}}%</p>
     <div class="row proccessBar-row ">
         <div class="col-md-9 proccessBar-col">
             <mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100">

src/app/common/uploading-processbar/uploading-processbar.component.ts

@@ -13,7 +13,7 @@ import { UploadServiceService } from './upload-service.service';
 export class UploadingProcessbarComponent implements OnInit {
   uploadProgress: number = 0
   subscription: Subscription;
-
+  upload_file_type:string
   constructor(
     @Inject(MAT_SNACK_BAR_DATA) public data,
     private _snackRef: MatSnackBarRef<UploadingProcessbarComponent>,
@@ -21,6 +21,8 @@ export class UploadingProcessbarComponent implements OnInit {
   ) { }
 
   ngOnInit() {
+   this.upload_file_type =  this.data.upload_file_type 
+    debugger
     this.subscription = this._US.currentCount.subscribe((count:number) => {
       this.uploadProgress = count;
       if (this.uploadProgress === 100 || this.uploadProgress == null ) {

src/app/components/preferences/dynamips/add-ios-template/add-ios-template.component.ts

@@ -158,6 +158,7 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
     this.uploader.uploadItem(itemToUpload);
     this.snackBar.openFromComponent(UploadingProcessbarComponent, {
       panelClass: 'uplaoding-file-snackabar',
+      data:{upload_file_type:'Image'}
     });
   }
 

src/app/components/preferences/ios-on-unix/add-iou-template/add-iou-template.component.ts

@@ -129,6 +129,7 @@ export class AddIouTemplateComponent implements OnInit, OnDestroy {
     this.uploader.uploadItem(itemToUpload);
     this.snackBar.openFromComponent(UploadingProcessbarComponent, {
       panelClass: 'uplaoding-file-snackabar',
+      data:{upload_file_type:'Image'}
     });
 
   }

src/app/components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component.ts

@@ -157,7 +157,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
     
     if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true; ((itemToUpload as any).options.headers =[{name:'Authorization',value:'Bearer ' + this.server.authToken}]) 
     this.uploader.uploadItem(itemToUpload);
-    this.snackBar.openFromComponent(UploadingProcessbarComponent,{panelClass: 'uplaoding-file-snackabar',});
+    this.snackBar.openFromComponent(UploadingProcessbarComponent,{panelClass: 'uplaoding-file-snackabar', data:{upload_file_type:'Image'}});
   }
 
   cancelUploading() {

src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts

@@ -728,6 +728,7 @@ export class NewTemplateDialogComponent implements OnInit {
   openSnackBar() {
     this.snackBar.openFromComponent(UploadingProcessbarComponent, {
       panelClass: 'uplaoding-file-snackabar',
+      data:{upload_file_type:'Image'}
     });
   }
 

src/app/components/project-map/project-map.component.ts

@@ -943,6 +943,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   importProject() {
+    debugger
     let uuid: string = '';
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
       width: '400px',
@@ -955,9 +956,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       uuid = projectId;
     });
 
-    dialogRef.afterClosed().subscribe(() => {
+    dialogRef.afterClosed().subscribe((isCancel:boolean) => {
       subscription.unsubscribe();
-      if (uuid) {
+      if (uuid && !isCancel) {
         this.bottomSheet.open(NavigationDialogComponent);
         let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
         bottomSheetRef.instance.projectMessage = 'imported project';

src/app/components/projects/import-project-dialog/import-project-dialog.component.html

@@ -38,7 +38,7 @@
     <button class="delete-button" [hidden]="!isDeleteVisible">
       <mat-icon color="primary" (click)="onDeleteClick()" class="delete-icon">clear</mat-icon>
     </button>
-    <div mat-dialog-actions>
+    <div mat-dialog-actions  align="end">
       <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
       <button
         mat-button
@@ -54,13 +54,13 @@
   </form>
 </div>
 <div [hidden]="!isFirstStepCompleted">
-  <div class="progress">
+  <!-- <div class="progress">
     <div class="progress-bar" role="progressbar" [ngStyle]="{ width: uploader.progress + '%' }"></div>
-  </div>
+  </div> -->
-  <div class="result-message-box">
+  <div class="">
     <span>{{ resultMessage }}</span>
   </div>
-  <div mat-dialog-actions>
+  <div mat-dialog-actions  align="end">
     <button
       mat-button
       [disabled]="!isFinishEnabled"

src/app/components/projects/import-project-dialog/import-project-dialog.component.spec.ts

@@ -18,6 +18,10 @@ import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
 import { ProjectService } from '../../../services/project.service';
 import { ImportProjectDialogComponent } from './import-project-dialog.component';
+import { ToasterService } from '../../../services/toaster.service';
+import { MockedToasterService } from '../../../services/toaster.service.spec';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
 
 export class MockedProjectService {
   public projects: Project[] = [
@@ -62,6 +66,7 @@ describe('ImportProjectDialogComponent', () => {
   let server: Server;
   let debugElement: DebugElement;
   let fileSelectDirective: FileSelectDirective;
+  let mockedToasterService = new MockedToasterService()
 
   let dialogRef = {
     close: jasmine.createSpy('close'),
@@ -77,6 +82,7 @@ describe('ImportProjectDialogComponent', () => {
         MatDialogModule,
         MatFormFieldModule,
         MatInputModule,
+        MatSnackBarModule,
         NoopAnimationsModule,
         FileUploadModule,
         FormsModule,
@@ -87,6 +93,8 @@ describe('ImportProjectDialogComponent', () => {
         { provide: MatDialogRef, useValue: dialogRef },
         { provide: MAT_DIALOG_DATA, useValue: [] },
         { provide: ProjectService, useClass: MockedProjectService },
+        { provide: ToasterService, useValue: mockedToasterService },
+
       ],
       declarations: [ImportProjectDialogComponent],
     }).compileComponents();

src/app/components/projects/import-project-dialog/import-project-dialog.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ToasterService } from '../../../services/toaster.service';
 import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
 import { v4 as uuid } from 'uuid';
 import { Project } from '../../../models/project';
@@ -9,6 +10,9 @@ import { ServerResponse } from '../../../models/serverResponse';
 import { ProjectService } from '../../../services/project.service';
 import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
 import { ProjectNameValidator } from '../models/projectNameValidator';
+import { UploadServiceService } from '../../../common/uploading-processbar/upload-service.service';
+import { UploadingProcessbarComponent } from '../../../common/uploading-processbar/uploading-processbar.component';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-import-project-dialog',
@@ -18,6 +22,7 @@ import { ProjectNameValidator } from '../models/projectNameValidator';
 })
 export class ImportProjectDialogComponent implements OnInit {
   uploader: FileUploader;
+  uploadProgress: number = 0;
   server: Server;
   isImportEnabled: boolean = false;
   isFinishEnabled: boolean = false;
@@ -35,7 +40,11 @@ export class ImportProjectDialogComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: any,
     private formBuilder: FormBuilder,
     private projectService: ProjectService,
-    private projectNameValidator: ProjectNameValidator
+    private projectNameValidator: ProjectNameValidator,
+    private toasterService : ToasterService,
+    private uploadServiceService: UploadServiceService,
+    private snackBar : MatSnackBar,
+
   ) {
     this.projectNameForm = this.formBuilder.group({
       projectName: new FormControl(null, [Validators.required, projectNameValidator.get]),
@@ -64,6 +73,16 @@ export class ImportProjectDialogComponent implements OnInit {
       this.resultMessage = 'Project was imported succesfully!';
       this.isFinishEnabled = true;
     };
+    this.uploader.onProgressItem = (progress: any) => {
+      this.uploadProgress = progress['progress'];
+      this.uploadServiceService.processBarCount(this.uploadProgress)
+    };
+
+    this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
+      if (isCancel) {
+        this.cancelUploading()
+      }
+    })
   }
 
   get form() {
@@ -96,10 +115,12 @@ export class ImportProjectDialogComponent implements OnInit {
   importProject() {
     const url = this.prepareUploadPath();
     this.uploader.queue.forEach((elem) => (elem.url = url));
-    this.uploader.authToken = `Bearer ${this.server.authToken.toString()}`
+    this.uploader.authToken = `Bearer ${this.server.authToken}`
     this.isFirstStepCompleted = true;
     const itemToUpload = this.uploader.queue[0];
     this.uploader.uploadItem(itemToUpload);
+    this.snackBar.openFromComponent(UploadingProcessbarComponent,{panelClass: 'uplaoding-file-snackabar',data:{upload_file_type:'Project'}});
+
   }
 
   openConfirmationDialog(existingProject: Project) {
@@ -126,11 +147,11 @@ export class ImportProjectDialogComponent implements OnInit {
 
   onNoClick(): void {
     this.uploader.cancelAll();
-    this.dialogRef.close();
+    this.dialogRef.close(false);
   }
 
   onFinishClick(): void {
-    this.dialogRef.close();
+    this.dialogRef.close(false);
   }
 
   onDeleteClick(): void {
@@ -145,4 +166,14 @@ export class ImportProjectDialogComponent implements OnInit {
     const projectName = this.projectNameForm.controls['projectName'].value;
     return this.projectService.getUploadPath(this.server, this.uuid, projectName);
   }
+
+  cancelUploading() {
+    this.uploader.clearQueue();
+    this.uploadServiceService.processBarCount(null)
+    this.toasterService.warning('Image upload cancelled');
+    this.uploadServiceService.cancelFileUploading(false)
+    this.isFirstStepCompleted = false
+    this.uploader.cancelAll();
+    this.dialogRef.close(true);
+  }
 }