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

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<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 ellipsis"
        matTooltip="{{node.item}}"
        matTooltipPosition="above"
        matTooltipShowDelay="1000"
        [matTooltipClass]="'full-size-tooltip'"
      >
        {{node.item}}
      </span>
    </div>
  </mat-tree-node>
</mat-tree>