services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/folder-tree/folder-tree.component.html

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">

  <mat-tree-node
    *matTreeNodeDef="let node"
    matTreeNodeToggle matTreeNodePadding
    matTreeNodePaddingIndent="17"
    [ngStyle]="{'display': 'none'}"
  >
    <button mat-icon-button disabled></button>
    {{node.item}}
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding matTreeNodePaddingIndent="17" class="input-node">
    <form class="add-folder-form" id="folder-form">
      <mat-form-field>
        <mat-label>New folder</mat-label>
        <input matInput #itemValue [formControl]="folderFormControl" [errorStateMatcher]="matcher">
        <mat-error *ngIf="!folderFormControl.hasError('required') && !folderFormControl.hasError('isDuplicate')">
          The folder name can only contain Latin letters, numbers and special characters except for #, ?, /, \, "
        </mat-error>
        <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 exists
        </mat-error>
        <mat-hint *ngIf="cloud === 'azure'">If you do not upload any object to the folder, this folder will be removed on MS Azure</mat-hint>
      </mat-form-field>
      <button (click)="createFolder(node, itemValue.value)"
              [ngClass]="{'check': folderFormControl.valid && folderFormControl.dirty && !folderCreating}"
              mat-icon-button class="btn action-btn"
              [disabled]="!folderFormControl.valid || !folderFormControl.dirty"
              matTooltip="Please wait! Folder is creating."
              [matTooltipDisabled]="!folderCreating"
              matTooltipPosition="above"
      >
        <span><i class="material-icons ">check</i></span></button>
      <button (click)="removeItem(node)" mat-icon-button class="btn close action-btn"><span ><i class="material-icons ">close</i></span></button>
    </form>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding  matTreeNodePaddingIndent="17"  [ngClass]="{'cursor-not-allow': bucketDataService.emptyFolder}">
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename" [ngClass]="{'not-allowed': bucketDataService.emptyFolder}">
      <mat-icon class="mat-icon-rtl-mirror" [ngClass]="{'active-item': (selectedFolder === node && !bucketDataService.emptyFolder)}">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    <div
      (click)="showItem(node)"
      class="folder-item-line"
      [ngClass]="{'active-item': (selectedFolder === node && !bucketDataService.emptyFolder), 'not-allowed': bucketDataService.emptyFolder}"
    >
      <i class="material-icons folder-icon">folder</i>
      <span
        class="folder"
        matTooltip="{{node.item}}"
        matTooltipPosition="above"
        matTooltipShowDelay="1000"
        [matTooltipClass]="'bucket-item-tooltip'"
      >
        {{node.item}}
      </span>
    </div>
  </mat-tree-node>
</mat-tree>