Merge branch 'develop' into DLAB-1775
diff --git a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
index cf8bfd3..dc10b86 100644
--- a/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/core/util/patterns.ts
@@ -24,6 +24,6 @@
   url: '[a-zA-Z0-9.://%#&\\.@:%-_\+~#=]*\.[^\s]*[a-zA-Z0-9]/+',
   nodeCountPattern: '^[1-9]\\d*$',
   integerRegex: '^[0-9]*$',
-  folderRegex: `[A-Za-z0-9]+$`,
+  folderRegex: "[-A-Za-z0-9!@$%^&*|+=_'~{}<>`:;[ ]+$",
   fullUrl: /^(http?|ftp|https):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+([.:])(\d{4}|com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*\/$/
 };
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index 1514359..841b7c6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -28,7 +28,7 @@
     <div class="submit m-bott-10 m-top-10">
       <span [matTooltip]="'You have not permission to upload data'" matTooltipPosition="above" matTooltipDisabled="{{this.bucketStatus.upload}}">
         <button mat-raised-button type="button" class="butt action" [disabled]="!this.bucketStatus.upload || allDisable">
-          <input [ngClass]="{'not-allowed': !this.bucketStatus.upload}" type="file" (change)="handleFileInput($event)" title="">
+          <input [ngClass]="{'not-allowed': !this.bucketStatus.upload}" type="file" (change)="handleFileInput($event)" title="" multiple>
           Add file
         </button>
       </span>
@@ -49,8 +49,7 @@
           class="butt"
           mat-raised-button
           (click)="fileAction('delete')"
-          [disabled]="!selected?.length || !this.bucketStatus.delete || allDisable"
-
+          [disabled]="(!selected?.length && !selectedFolderForAction?.length) || !this.bucketStatus.delete || allDisable"
         >
         Delete
       </button>
@@ -71,7 +70,7 @@
 <!--      <button type="button" class="butt" mat-raised-button [disabled]="this.addedFiles.length === 0" (click)="uploadNewFile()">Upload</button>-->
     </div>
     <p class="path"><span>Bucket path:</span><span class="url ellipsis"> {{path}}</span></p>
-    <div class="backet-wrapper" id="scrolling">
+    <div class="backet-wrapper" [ngClass]="{'added-upload': addedFiles.length}" id="scrolling">
       <div class="navigation">
         <dlab-folder-tree
           (showFolderContent)=onFolderClick($event)
@@ -80,8 +79,8 @@
         > </dlab-folder-tree>
       </div>
       <div class="directory">
-        <div class="folder-item t_header"  *ngIf="folderItems.length && !addedFiles.length">
-          <div class="folder-item-wrapper header-wrapper folder-tree">
+        <div class="folder-item t_header"  *ngIf="folderItems.length">
+          <div class="folder-item-wrapper header-wrapper folder-tree header-item">
             <div class="name"><span class="th_name">Name</span></div>
             <div class="size"><span class="th_size">Size</span></div>
             <div class="date"><span class="th_date">Last modified</span></div>
@@ -91,6 +90,9 @@
         <ul class="folder-tree">
           <li *ngFor="let file of folderItems" class="folder-item" >
             <div class="folder-item-wrapper" *ngIf="file.children && file.item" (click)="showItem(file)">
+              <span *ngIf="this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isFolderSelected}" (click)="toggleSelectedFile(file, 'folder');$event.stopPropagation()" >
+                    <span class="checked-checkbox" *ngIf="file.isFolderSelected"></span>
+                  </span>
               <div class="name name-folder"><i class="material-icons folder-icon" >folder</i><span class="name-wrap">{{file.item}}</span></div>
               <div class="size size-folder">-</div>
               <div class="date" *ngIf="!file.isDownloading">-</div>
@@ -98,10 +100,10 @@
 <!--                <div class="progres" *ngIf="file.isSelected"><div class="bar"></div></div>-->
 <!--              </div>-->
             </div>
-
-            <div class="folder-item-wrapper"  (click)="toggleSelectedFile(file)" *ngIf="!file.children" [ngClass]="{'no-select': !this.bucketStatus.download && !this.bucketStatus.delete}">
+            <div class="folder-item-wrapper"  (click)="toggleSelectedFile(file, 'file')" *ngIf="!file.children" [ngClass]="{'no-select': !this.bucketStatus.download && !this.bucketStatus.delete}">
               <div class="name name-file">
-                 <span *ngIf="this.bucketStatus.download || this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file);$event.stopPropagation()" >
+                 <span *ngIf="this.bucketStatus.download || this.bucketStatus.delete" class="empty-checkbox" [ngClass]="{'checked': file.isSelected}" (click)="toggleSelectedFile(file, 'file');$event.stopPropagation()" >
+
                     <span class="checked-checkbox" *ngIf="file.isSelected"></span>
                   </span>
                 <span class="item-name name-wrap" [ngClass]="{'removed-checkbox': !this.bucketStatus.download && !this.bucketStatus.delete}">{{file.item}}</span>
@@ -116,7 +118,34 @@
         </ul>
       </div>
     </div>
-    <div class="text-center m-top-30 m-bott-30">
+    <div class="upload-window" *ngIf="addedFiles.length">
+      <header class="upload-header">
+        <h4 class="modal-title">Upload files</h4>
+        <button type="button" class="close" (click)="closeUploadWindow()">&times;</button>
+      </header>
+      <ul class="upload-files">
+        <li class="file upload-table-header" *ngIf="addedFiles.length">
+          <div class="name ellipsis">File</div>
+          <div class="upload-path ellipsis">Path</div>
+          <div class="size">Size</div>
+          <div class="state"></div>
+          <div class="remove"></div>
+        </li>
+        <li *ngFor="let file of addedFiles" class="file">
+          <div class="name ellipsis" matTooltip="{{file.name}}">{{file.name}}</div>
+          <div class="upload-path ellipsis" matTooltip="{{file.path}}">{{file.path}}</div>
+          <div class="size">{{file.size}}MB</div>
+          <div class="state">
+            <button mat-raised-button (click)="uploadNewFile(file)" *ngIf="!file.isUploading && !file.uploaded && !file.errorUploading">Upload</button>
+            <mat-progress-bar mode="indeterminate" *ngIf="file.isUploading"></mat-progress-bar>
+            <span *ngIf="file.uploaded">Uploaded</span>
+            <span *ngIf="file.errorUploading" class="error">Uploading error</span>
+          </div>
+          <div class="remove"><i (click)="deleteAddedFile(file)" class="material-icons close">close</i></div>
+        </li>
+      </ul>
+    </div>
+    <div class="text-center m-top-30 m-bott-20">
       <button type="button" class="butt" mat-raised-button (click)="this.dialogRef.close()">Close</button>
     </div>
   </div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
index 87a2461..bb7029d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.scss
@@ -75,27 +75,22 @@
       }
     }
   }
-
-  .text-center{
-    position: absolute;
-    bottom: 3vh;
-    left: 0;
-    right: 0;
-  }
 }
 
 .backet-wrapper{
-  height: 50vh;
+  height: 53vh;
   border: 2px solid rgba(0,0,0,.12);
   border-radius: 5px;
   display: flex;
 
-
+  &.added-upload{
+    height: 37vh;
+  }
 
   .navigation{
     flex: 1;
     border-right: 2px solid rgba(0,0,0,.12);
-    max-height: 500px;
+    height: 100%;
     overflow: auto;
     padding-top: 6px;
     .folder-tree{
@@ -111,7 +106,7 @@
   }
 
   .directory{
-    max-height: 500px;
+    max-height: 100%;
     flex: 2;
     font-size: 14px;
     font-weight: 400;
@@ -131,14 +126,15 @@
           padding-right: 10px;
         }
         &-folder{
+          padding-left: 9px;
           span{
-            padding-left: 10px;
+            padding-left: 5px;
           }
         }
         &-file{
-          padding-left: 4px;
+          //padding-left: 4px;
           span.item-name{
-            padding-left: 14px;
+            padding-left: 9px;
             &.removed-checkbox{
               padding-left: 0;
             }
@@ -148,7 +144,7 @@
       .size{
         flex:1;
         &-folder{
-          padding-left: 34px;
+          padding-left: 7px;
         }
       }
       .date{
@@ -220,7 +216,7 @@
       right: 0;
 
       .th_name{
-        padding-left: 35px;
+        padding-left: 29px;
         font-size: 11px;
       }
 
@@ -240,6 +236,9 @@
        align-items: center;
        cursor: pointer;
        color: rgba(0,0,0,.87);
+       &.header-item{
+         pointer-events: none;
+       }
        i{
          color: rgb(232, 232, 232);
        }
@@ -308,16 +307,15 @@
 }
 
 .upload-window{
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.42), 0 24px 20px 3px rgba(0, 0, 0, 0.42), 0 9px 20px 8px rgba(0, 0, 0, 0.42);
-  position: fixed;
-  right: 0;
-  bottom: 0;
+  margin-top: 20px;
+  border: 2px solid rgba(0,0,0,.12);
+  border-radius: 5px;
   background-color: white;
-  width: 700px;
   min-height: 100px;
   color: black;
+  
   .upload-header{
-    padding-left: 30px;
+    padding-left: 8px;
     background: #f6fafe;
     height: 30px;
     line-height: 30px;
@@ -333,13 +331,14 @@
       font-size: 14px;
       background: #f6fafe;
   }
+    
     .close{
       position: absolute;
       top: 0;
       right: 0;
       height: 30px;
       width: 30px;
-      font-size: 14px;
+      font-size: 20px;
       font-weight: 300;
       border: 0;
       background: none;
@@ -355,10 +354,16 @@
   }
   .upload-files{
     padding: 5px;
+    height: 100px;
+    overflow: auto;
     .file{
       padding: 2px;
       display: flex;
       font-size: 12px;
+      position: relative;
+      &.upload-table-header{
+        font-size: 11px;
+      }
       .name{
         flex:12;
         padding-right: 5px;
@@ -390,13 +395,21 @@
         }
       }
       .remove{
-        flex:1;
         display: flex;
         align-items: center;
+        flex: 1;
+        position: relative;
         .close{
           color: #577289;
-          font-size: 14px;
+          font-size: 12px;
           cursor: pointer;
+          position: absolute;
+          top: 3px;
+          right: 0;
+          height: 18px;
+          width: 14px;
+          transition: all 0.45s ease-in-out;
+
           &:hover{
             color: #f1696e;
           }
@@ -411,12 +424,18 @@
 @media only screen and (max-height: 840px) {
   .backet-wrapper {
     height: 45vh;
+    &.added-upload{
+      height: 30vh;
+    }
   }
 }
 
 @media only screen and (max-height: 690px) {
   .backet-wrapper {
     height: 40vh;
+    &.added-upload{
+      height: 25vh;
+    }
   }
 }
 
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
index 88e185b..22f70c2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.ts
@@ -44,7 +44,7 @@
 
   @ViewChild(FolderTreeComponent, {static: true}) folderTreeComponent;
   public selectedFolder: any;
-  private isUploading: boolean;
+  public selectedFolderForAction: any;
   public selected: any[];
   private uploadForm: FormGroup;
   public bucketStatus;
@@ -87,24 +87,37 @@
       const newAddedFiles = Object['values'](event.target.files).map(v => (
         {name: v['name'], file: file, 'size': (v['size'] / 1048576).toFixed(2), path: this.path, isUploading: false, uploaded: false, errorUploading: false}));
       this.addedFiles = [...this.addedFiles, ...newAddedFiles];
-      this.isUploadWindowOpened = !!this.addedFiles.length;
     }
-    event.target.files = [];
+    // event.target.value = null;
   }
 
   public closeUploadWindow() {
-    this.isUploadWindowOpened = false;
+    // this.isUploadWindowOpened = false;
+    this.addedFiles = [];
+
   }
 
 
-  public toggleSelectedFile(file) {
+  public toggleSelectedFile(file, type) {
    // remove if when will be possible download several files
-    if (!file.isSelected) {
+    if (!file.isSelected || !file.isFolderSelected) {
       this.folderItems.forEach(item => item.isSelected = false);
+      this.folderItems.forEach(item => item.isFolderSelected = false);
+    }
+    if (type === 'file') {
+      file.isSelected = !file.isSelected;
+      this.selected = this.folderItems.filter(item => item.isSelected);
+      this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected);
     }
 
-    file.isSelected = !file.isSelected;
-    this.selected = this.folderItems.filter(item => item.isSelected);
+    if (type === 'folder') {
+      file.isFolderSelected = !file.isFolderSelected;
+      this.selected = this.folderItems.filter(item => item.isSelected);
+      this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected);
+    }
+
+    console.log(this.selectedFolderForAction, this.selected );
+
   }
 
   filesPicked(files) {
@@ -118,8 +131,7 @@
   }
 
   public onFolderClick(event) {
-    this.folderItems.forEach(item => item.isSelected = false);
-    this.selected = this.folderItems.filter(item => item.isSelected);
+    this.clearSelection();
     this.selectedFolder = event.flatNode;
     this.folderItems = event.element ? event.element.children : event.children;
     if (this.folderItems) {
@@ -131,7 +143,13 @@
       this.bucketName = this.path.substring(0, this.path.indexOf('/')) || this.path;
       this.folderItems.forEach(item => item.isSelected = false);
     }
+  }
 
+  private clearSelection() {
+    this.folderItems.forEach(item => item.isSelected = false);
+    this.folderItems.forEach(item => item.isFolderSelected = false);
+    this.selected = this.folderItems.filter(item => item.isSelected);
+    this.selectedFolderForAction = this.folderItems.filter(item => item.isFolderSelected);
   }
 
   public deleteAddedFile(file) {
@@ -139,14 +157,14 @@
   }
 
   private uploadNewFile(file) {
-    const path = `${file.path}/${file.name}`;
+    const path = file.path.indexOf('/') !== -1 ?  this.path.slice(this.path.indexOf('/') + 1) : '';
+    const fullPath = path ? `${path}/${file.name}` : file.name;
     const formData = new FormData();
     formData.append('file', file.file);
-    formData.append('object', path);
+    formData.append('object', fullPath);
     formData.append('bucket', this.bucketName);
     formData.append('endpoint', this.endpoint);
     file.isUploading = true;
-    console.log(formData);
     this.bucketBrowserService.uploadFile(formData)
       .subscribe(() => {
         this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
@@ -167,8 +185,13 @@
   }
 
   public fileAction(action) {
-    this.selected = this.folderItems.filter(item => item.isSelected);
+    // this.selected = this.folderItems.filter(item => item.isSelected);
     const selected = this.folderItems.filter(item => item.isSelected)[0];
+    const folderSelected = this.folderItems.filter(item => item.isFolderSelected)[0];
+    if (!selected) {
+      this.toastr.error('Folder deleting not working yet!', 'Oops!');
+      return;
+    }
     const path = encodeURIComponent(`${this.pathInsideBucket}${this.selected[0].item}`);
     if (action === 'download') {
       selected['isDownloading'] = true;
@@ -177,13 +200,15 @@
         FileUtils.downloadBigFiles(data, selected.item);
         selected['isDownloading'] = false;
         this.folderItems.forEach(item => item.isSelected = false);
-        }, error => this.toastr.error(error.message || 'File downloading error!', 'Oops!')
-      );
+        }, error => {
+            this.toastr.error(error.message || 'File downloading error!', 'Oops!');
+            selected['isDownloading'] = false;
+          }
+        );
     }
 
     if (action === 'delete') {
       this.bucketBrowserService.deleteFile(`/${this.bucketName}/object/${path}/endpoint/${this.endpoint}`).subscribe(() => {
-
         this.bucketDataService.refreshBucketdata(this.data.bucket, this.data.endpoint);
           this.toastr.success('File successfully deleted!', 'Success!');
         this.folderItems.forEach(item => item.isSelected = false);
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
index 7c92a8a..a6c7efe 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
@@ -21,7 +21,11 @@
 import { BehaviorSubject} from 'rxjs';
 import {BucketBrowserService, TodoItemNode} from '../../core/services/bucket-browser.service';
 
-const array = [{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '4.txt/dsafaraorueajkegrgavhsfnvgahsfgsdjfhagsdjfg497frgfhsdajfsgdafjs', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:36:36'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '51.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:56:46'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'Untitlsed', 'size': '5 bytes', 'lastModifiedDate': '13-4-2020 03:39:11'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'adassdas', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 02:17:39'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'downloadTest.txt', 'size': '16 bytes', 'lastModifiedDate': '17-4-2020 03:47:47'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/', 'size': '11 bytes', 'lastModifiedDate': '13-4-2020 03:39:24'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/2.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:18:29'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'foslder1/3.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:48:05'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/folder1/folder1/folder1/folder1/test.pem', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 01:38:50'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folsder2/', 'size': '11 bytes', 'lastModifiedDate': '22-4-2020 08:46:13'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder3/1.txt', 'size': '18 bytes', 'lastModifiedDate': '22-4-2020 08:54:51'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'objectName', 'size': '5 bytes', 'lastModifiedDate': '14-4-2020 09:36:16'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'sss.txt', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57:54'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test1', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 11:22:18'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test2', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:12:53'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'zzz', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:56:09'},{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '4.txt/dsafaraorueajkegrgavhsfnvgahsfgsdjfhagsdjfg497frgfhsdajfsgdafj', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:36:36'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '5.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:56:46'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'Untitled', 'size': '5 bytes', 'lastModifiedDate': '13-4-2020 03:39:11'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'adasdas', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 02:17:39'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'downloadTest.txt', 'size': '16 bytes', 'lastModifiedDate': '17-4-2020 03:47:47'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/', 'size': '11 bytes', 'lastModifiedDate': '13-4-2020 03:39:24'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/2.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:18:29'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'foldetr1/3.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:48:05'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/ftolder1/folder1/folder1/folder1/test.pem', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 01:38:50'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder21/', 'size': '11 bytes', 'lastModifiedDate': '22-4-2020 08:46:13'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'foldser312/1.txt', 'size': '18 bytes', 'lastModifiedDate': '22-4-2020 08:54:51'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'objectName', 'size': '5 bytes', 'lastModifiedDate': '14-4-2020 09:36:16'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'sss.txt', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '1test', 'size': '112 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57:54'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test11', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 11:22:18'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test2', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:12:53'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'zzsz', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:56:09'},{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '4.txt/dsafaraorueajkegrgavhsfnvgahsfgsdjfhagsdjfg497frgfhsdajfsgdafj', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:36:36'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '5.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:56:46'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'Untitled', 'size': '5 bytes', 'lastModifiedDate': '13-4-2020 03:39:11'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'adasdas', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 02:17:39'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'downloadTest.txt', 'size': '16 bytes', 'lastModifiedDate': '17-4-2020 03:47:47'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1212/', 'size': '11 bytes', 'lastModifiedDate': '13-4-2020 03:39:24'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/2.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:18:29'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/3.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:48:05'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'fol2der1/folder1/folder1/folder1/2folder1/test.pem', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 01:38:50'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder2/', 'size': '11 bytes', 'lastModifiedDate': '22-4-2020 08:46:13'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder3/1.txt', 'size': '18 bytes', 'lastModifiedDate': '22-4-2020 08:54:51'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'objectName', 'size': '5 bytes', 'lastModifiedDate': '14-4-2020 09:36:16'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'sss.txt', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57:54'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test1', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 11:22:18'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test2', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:12:53'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'zzz', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:56:09'}];
+
+const array = [{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder11/dsafaraorueajkegrgavhsfnvgahsfgsdjfhagsdjfg497frgfhsdajfsgdafjs', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:36:36'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '51.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:56:46'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'Untitlsed', 'size': '5 bytes', 'lastModifiedDate': '13-4-2020 03:39:11'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'adassdas', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 02:17:39'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'downloadTest.txt', 'size': '16 bytes', 'lastModifiedDate': '17-4-2020 03:47:47'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/', 'size': '11 bytes', 'lastModifiedDate': '13-4-2020 03:39:24'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/2.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:18:29'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder31/3.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:48:05'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/folder1/folder1/folder1/folder1/test.pem', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 01:38:50'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder12/', 'size': '11 bytes', 'lastModifiedDate': '22-4-2020 08:46:13'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder3/1.txt', 'size': '18 bytes', 'lastModifiedDate': '22-4-2020 08:54:51'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'objectName', 'size': '5 bytes', 'lastModifiedDate': '14-4-2020 09:36:16'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'sss.txt', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57:54'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test1', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 11:22:18'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test2', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:12:53'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'zzz', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:56:09'},{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '4.txt/dsafaraorueajkegrgavhsfnvgahsfgsdjfhagsdjfg497frgfhsdajfsgdafj', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:36:36'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '5.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:56:46'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'Untitled', 'size': '5 bytes', 'lastModifiedDate': '13-4-2020 03:39:11'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'adasdas', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 02:17:39'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'downloadTest.txt', 'size': '16 bytes', 'lastModifiedDate': '17-4-2020 03:47:47'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/', 'size': '11 bytes', 'lastModifiedDate': '13-4-2020 03:39:24'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/2.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:18:29'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder31/3.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:48:05'},
+{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'objectName', 'size': '5 bytes', 'lastModifiedDate': '14-4-2020 09:36:16'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'sss.txt', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '1test', 'size': '112 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57:54'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test11', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 11:22:18'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test2', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:12:53'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'zzsz', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:56:09'},{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '4.txt/dsafaraorueajkegrgavhsfnvgahsfgsdjfhagsdjfg497frgfhsdajfsgdafj', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:36:36'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': '5.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 11:56:46'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'Untitled', 'size': '5 bytes', 'lastModifiedDate': '13-4-2020 03:39:11'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'adasdas', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 02:17:39'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'downloadTest.txt', 'size': '16 bytes', 'lastModifiedDate': '17-4-2020 03:47:47'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1212/', 'size': '11 bytes', 'lastModifiedDate': '13-4-2020 03:39:24'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/2.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:18:29'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder1/3.txt', 'size': '18 bytes', 'lastModifiedDate': '21-4-2020 10:48:05'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'fol2der1/folder1/folder1/folder1/2folder1/test.pem', 'size': '1 KB', 'lastModifiedDate': '15-4-2020 01:38:50'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder2/', 'size': '11 bytes', 'lastModifiedDate': '22-4-2020 08:46:13'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder3/1.txt', 'size': '18 bytes', 'lastModifiedDate': '22-4-2020 08:54:51'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'objectName', 'size': '5 bytes', 'lastModifiedDate': '14-4-2020 09:36:16'},
+{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'sss.txt', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:13:26'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:55:02'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test.pem', 'size': '1 KB', 'lastModifiedDate': '14-4-2020 04:57:54'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test1', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 11:22:18'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'test2', 'size': '52 bytes', 'lastModifiedDate': '17-4-2020 12:12:53'}, {'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'zzz', 'size': '12 bytes', 'lastModifiedDate': '14-4-2020 04:56:09'}];
+
 // const array = [];
 
 @Injectable()
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
index 4e29cc8..7d79751 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html
@@ -13,13 +13,14 @@
         <mat-label>New folder</mat-label>
         <input matInput #itemValue [formControl]="folderFormControl" [errorStateMatcher]="matcher">
         <mat-error *ngIf="!folderFormControl.hasError('required') && !folderFormControl.hasError('isDuplicate')">
-         Folder name can only contain latin letters, numbers end special characters exepting  #, ?, /, \, "
+          The folder name can only contain Latin letters, numbers and special characters except for #, ?, /, \, "
         </mat-error>
-        <mat-error *ngIf="folderFormControl.hasError('required')">isDuplicate
+        <mat-error *ngIf="folderFormControl.hasError('required')">
           Folder name is <strong>required</strong>
         </mat-error>
         <mat-error *ngIf="folderFormControl.hasError('isDuplicate')">
-          Folder with this name already exist
+          Folder with this name already exists
+
         </mat-error>
       </mat-form-field>
       <button (click)="saveNode(node, itemValue.value)" [ngClass]="{'check': folderFormControl.valid && folderFormControl.dirty}" mat-icon-button class="btn action-btn" [disabled]="!folderFormControl.valid || !folderFormControl.dirty"><span><i class="material-icons ">check</i></span></button>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
index 80d51f9..202d4e0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.scss
@@ -1,10 +1,11 @@
 
 .folder{
   padding-left: 5px;
-  max-width: 150px;
+  max-width: 350px;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: hidden;
+
 }
 
 .mat-tree{
@@ -23,7 +24,6 @@
 }
 
 .active-item {
-  //border-bottom: 1px solid #00bcd4;
   color: #00bcd4;
   i{
     color: #00bcd4;
@@ -46,8 +46,6 @@
     width: 25px;
     height: 25px;
     line-height: 28px;
-    //display: flex;
-    //align-items: center;
   }
   &:hover{
     color: #00bcd4;
@@ -59,6 +57,9 @@
 
 .input-node {
   overflow: unset;
+  padding-top: 5px;
+  padding-bottom: 7px;
+
 
   button.mat-icon-button {
     &.action-btn {
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
index 5fdfda9..4aeab2b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.ts
@@ -107,7 +107,7 @@
 
   private duplicate(control) {
     if (control && control.value) {
-      const isDublicat = this.folders.slice(1).some(folder => folder.item.toLocaleLowerCase() === control.value.toLowerCase());
+      const isDublicat = this.folders.slice(1).some(folder => folder.item === control.value);
       return isDublicat ? { isDuplicate: true } : null;
     }
   }
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
index 2f36e20..4efbc78 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/detail-dialog/detail-dialog.component.scss
@@ -73,7 +73,6 @@
   }
 
   span {
-
     .danger_color {
       position: absolute;
       bottom: -16px;
diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss
index e1bbe94..426541d 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -311,12 +311,20 @@
   margin-top: 30px;
 }
 
+.m-top-40 {
+  margin-top: 40px;
+}
+
 .m-bott-10 {
   margin-bottom: 10px;
 }
 
+.m-bott-20 {
+  margin-bottom: 20px;
+}
+
 .m-bott-30 {
-  margin-bottom: 10px;
+  margin-bottom: 30px;
 }
 
 .m-top-10p {