Fixes after cr

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

@@ -1,8 +1,8 @@
 <span>{{confirmationMessage}}</span>
-<div class="buttons-bar" *ngIf="!isOpen">
+<div mat-dialog-actions *ngIf="!isOpen">
     <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
     <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Yes</button>
 </div>
-<div class="buttons-bar" *ngIf="isOpen">
+<div mat-dialog-actions *ngIf="isOpen">
     <button mat-button (click)="onNoClick()" color="accent">Ok</button>
 </div>

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

@@ -4,24 +4,26 @@
 
 .file-button{
     height: 50px;
-    width: 120px;
+    width: 20%;
     margin-top: 10px;
+    padding: 0px;
 }
 
 .file-name-form {
     float: right;
+    width: 100%;
 }
 
 .file-name-form-field {
-    margin-left: 10px; 
+    margin-left: 5%; 
-    margin-right: 10px; 
+    width: 65%; 
-    width:250px;
 }
 
 .delete-button {
     background: transparent; 
     border: none; 
-    outline: 0
+    outline: 0;
+    width: 10%;
 }
 
 .delete-icon {
@@ -30,4 +32,9 @@
 
 .result-message-box {
     margin-top: 10px;
+    text-align: center;
+}
+
+.progress-bar {
+    background-color : #0097a7;
 }

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

@@ -2,18 +2,18 @@
 <mat-horizontal-stepper #stepper [linear]="true">
   <mat-step label="Choose file" editable="false" completed="false">
     <div>
+      <form [formGroup]="projectNameForm" class="file-name-form">
         <input type="file" accept=".gns3project, .gns3p" class="non-visible" #file (change)="uploadProjectFile($event)" ng2FileSelect [uploader]="uploader"/>
         <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Choose file</button>
-      <form [formGroup]="projectNameForm" class="file-name-form">
         <mat-form-field class="file-name-form-field">
           <input matInput type="text" formControlName="projectName"  [ngClass]="{ 'is-invalid': form.projectName.errors }" placeholder="Please enter name" />
           <mat-error *ngIf="form.projectName.errors && form.projectName.errors.required">Project name is required</mat-error>
           <mat-error *ngIf="form.projectName.errors && form.projectName.errors.invalidName">Project name is incorrect</mat-error>
         </mat-form-field>
-      <button class="delete-button">
+        <button class="delete-button" [hidden]="!isDeleteVisible">
           <mat-icon color="primary" (click)="onDeleteClick()" class="delete-icon">clear</mat-icon>
         </button>
-      <div class="buttons-bar">
+        <div mat-dialog-actions>
           <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
           <button mat-button [disabled]="!isImportEnabled" (click)="onImportClick()" tabindex="2" mat-raised-button color="primary">Import</button>
         </div>
@@ -27,7 +27,7 @@
     <div class="result-message-box">
       <span>{{resultMessage}}</span>
     </div>
-    <div class="buttons-bar">
+    <div mat-dialog-actions>
       <button mat-button [disabled]="!isFinishEnabled" (click)="onNoClick()" tabindex="2" mat-raised-button color="primary">Finish</button>
     </div>
   </mat-step>

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

@@ -205,4 +205,31 @@ describe('ImportProjectDialogComponent', () => {
 
         expect(component.openConfirmationDialog).toHaveBeenCalled();
     });
+
+    it('should show delete button after selecting project', () => {
+        let fileItem = new FileItem(fileSelectDirective.uploader, new File([],"fileName"),{});
+        fileSelectDirective.uploader.queue.push(fileItem);
+        let event = {
+            target: {
+                files: [ {name : "uploadedFile"} ]
+            }
+        };
+        component.uploadProjectFile(event);
+
+        expect(component.isDeleteVisible).toBe(true);
+    });
+
+    it('should hide delete button after deselecting project', () => {
+        let fileItem = new FileItem(fileSelectDirective.uploader, new File([],"fileName"),{});
+        fileSelectDirective.uploader.queue.push(fileItem);
+        let event = {
+            target: {
+                files: [ {name : "uploadedFile"} ]
+            }
+        };
+        component.uploadProjectFile(event);
+        component.onDeleteClick();
+
+        expect(component.isDeleteVisible).toBe(false);
+    });
 });

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

@@ -11,7 +11,7 @@ import { ServerResponse } from '../../../models/serverResponse';
 
 export class Validator {
     static projectNameValidator(projectName) {
-      var pattern = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);
+      var pattern = new RegExp(/[~`!#$%\^&*+=\[\]\\';,/{}|\\":<>\?]/);
 
       if(!pattern.test(projectName.value)) {
         return null;
@@ -31,6 +31,7 @@ export class ImportProjectDialogComponent implements OnInit {
     server : Server;
     isImportEnabled : boolean = false;
     isFinishEnabled : boolean = false;
+    isDeleteVisible : boolean = false;
     resultMessage : string = "The project is being imported... Please wait";
     projectNameForm: FormGroup;
     submitted: boolean = false;
@@ -71,6 +72,7 @@ export class ImportProjectDialogComponent implements OnInit {
     uploadProjectFile(event) : void{
       this.projectNameForm.controls['projectName'].setValue(event.target.files[0].name.split(".")[0]);
       this.isImportEnabled = true;
+      this.isDeleteVisible = true;
     }
   
     onImportClick() : void{
@@ -135,6 +137,7 @@ export class ImportProjectDialogComponent implements OnInit {
     onDeleteClick() : void{
       this.uploader.queue.pop();
       this.isImportEnabled = false;
+      this.isDeleteVisible = false;
       this.projectNameForm.controls['projectName'].setValue("");
     }
 
@@ -143,4 +146,3 @@ export class ImportProjectDialogComponent implements OnInit {
       return `http://${this.server.ip}:${this.server.port}/v2/projects/${uuid()}/import?name=${projectName}`;
     }
 }
- 

src/app/components/projects/projects.component.css

@@ -1,3 +1,4 @@
 .import-button {
-    margin-right:10px
+    height: 40px;
+    margin: 20px;
 }

src/app/components/projects/projects.component.html

@@ -1,6 +1,9 @@
 <div class="content">
   <div class="default-header">
-    <h1>Projects</h1>
+    <div class="row">
+      <h1 class="col">Projects</h1>
+      <button class="col" mat-raised-button color="primary" (click)="importProject()" class="import-button">Import project</button>
+    </div>
   </div>
   <div class="default-content">
 
@@ -33,9 +36,5 @@
         <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
       </mat-table>
     </div>
-
-    <div class="buttons-bar">
-      <button mat-raised-button color="primary" (click)="importProject()" class="import-button">Import project</button>
-    </div>
   </div>
 </div>