services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.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.
  -->

<div class="manage-roles base-retreat">
  <div class="sub-nav">
    <div matTooltip="Only admin can add group."
         matTooltipPosition="above"
         [matTooltipDisabled]="healthStatus?.admin"
    >
      <button 
        mat-raised-button 
        class="butt add-group" 
        (click)="stepperView = !stepperView" 
        [disabled]="!healthStatus?.admin"
      >
        <i class="material-icons">people_outline</i>Add group
      </button>
    </div>
    <div></div>
  </div>

  <mat-card *ngIf="stepperView" class="m-top-10">
    <mat-horizontal-stepper #stepper class="stepper ani">
      <mat-step [completed]='false'>
        <ng-template matStepLabel>Groups</ng-template>
        <div class="inner-step mat-reset">
          <input 
            [validator]="groupValidation()" 
            type="text" 
            placeholder="Enter group name" 
            [(ngModel)]="setupGroup"
            #setupGroupName="ngModel" 
          />
          <div class="error" *ngIf="setupGroupName.errors?.patterns && setupGroupName.dirty">
            Group name can only contain letters, numbers, hyphens and '_'.
          </div>
          <div class="error" *ngIf="setupGroupName.errors?.duplicate && setupGroupName.dirty">
            Group name already exists.
          </div>
          <div class="error" *ngIf="setupGroupName.errors?.long">
            Group name cannot be longer than {{maxGroupLength}} characters.
          </div>
        </div>
        <div class="text-center m-bott-10">
          <button 
            mat-raised-button 
            (click)="resetDialog()" 
            class="butt"
          >
            Cancel
          </button>
          <button 
            mat-raised-button
            matStepperNext class="butt"
            [disabled]="!setupGroup || setupGroupName.errors?.long || setupGroupName.errors?.duplicate || setupGroupName.errors?.patterns"
          >
            Next
            <i class="material-icons arrow-icon">keyboard_arrow_right</i>
          </button>
        </div>
      </mat-step>

      <mat-step [completed]='false'>
        <ng-template matStepLabel>Users</ng-template>
        <div class="inner-step mat-reset">
          <input type="text" placeholder="Enter user login" [(ngModel)]="setupUser" />
        </div>
        <div class="text-center m-bott-10">
          <button mat-raised-button matStepperPrevious class="butt">
            <i class="material-icons arrow-icon">keyboard_arrow_left</i>
            Back
          </button>
          <button mat-raised-button (click)="resetDialog()" class="butt">
            Cancel
          </button>
          <button mat-raised-button matStepperNext class="butt">
            Next
            <i class="material-icons arrow-icon">keyboard_arrow_right</i>
          </button>
        </div>
      </mat-step>

      <mat-step [completed]='false'>
        <ng-template matStepLabel>Roles</ng-template>
        <div class="inner-step mat-reset roles">
          <div class="selector-wrapper">
            <multi-level-select-dropdown
              (selectionChange)="onUpdate($event)"
              name="roles"
              [items]="rolesList"
              [model]="setupRoles"
              [isAdmin]="healthStatus?.admin"
            ></multi-level-select-dropdown>
          </div>
        </div>
        <div class="text-center m-bott-10">
          <button mat-raised-button matStepperPrevious class="butt">
            <i class="material-icons arrow-icon">keyboard_arrow_left</i>
            Back
          </button>
          <button 
            mat-raised-button 
            (click)="resetDialog()" 
            class="butt"
          >
            Cancel
          </button>
          <button 
            mat-raised-button 
            (click)="manageAction('create', 'group')" 
            class="butt butt-success"
            [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length"
          >
            Create
          </button>
        </div>
      </mat-step>

    </mat-horizontal-stepper>
  </mat-card>
  <mat-divider></mat-divider>

  <div *ngIf="groupsData.length" class="ani">
    <table mat-table [dataSource]="groupsData" class="projects-table mat-elevation-z6">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef class="name"> Group name </th>
        <td mat-cell *matCellDef="let element" class="name">
          <div class="d-flex">
            <span
              class="ellipsis" 
              [matTooltip]="element.group"
              matTooltipPosition="above"
              [matTooltipClass]="'full-size-tooltip'">
              {{element.group}}
            </span>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="roles">
        <th mat-header-cell *matHeaderCellDef class="roles"> Roles </th>
        <td mat-cell *matCellDef="let element" class="roles">
          <div class="inner-step mat-reset">
              <multi-level-select-dropdown
                (selectionChange)="onUpdate($event)"
                [type]="element.group"
                [items]="rolesList"
                [model]="element.selected_roles"
                [isAdmin]="healthStatus?.admin"
              ></multi-level-select-dropdown>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="users">
        <th mat-header-cell *matHeaderCellDef class="users"> Users </th>
        <td mat-cell *matCellDef="let element" class="users-list ani">
          <mat-form-field class="chip-list">
            <input 
              #user 
              matInput 
              placeholder="Enter user login" 
              pattern="[@.-_0-9a-zA-Z]"
              (keydown.enter)="addUser(user, element);" 
              (keyup)="checkIfUserAdded(element, user.value)"
            />
            <button 
              mat-icon-button 
              matSuffix 
              (click)="addUser(user, element); user.value = ''" 
              [disabled]="element.isUserAdded"
            >
              <mat-icon 
                matTooltip="User is already added to this group" 
                matTooltipPosition="above" 
                [matTooltipDisabled]="!element.isUserAdded"
              >
                person_add
              </mat-icon>
            </button>
          </mat-form-field>
          <div class="list-selected list-container ani">
            <div class="scrolling">
              <mat-chip-list [disabled]="true">
                <mat-chip
                  *ngFor="let user of element.users"
                  [matTooltip]="user"
                  matTooltipPosition="above"
                  matTooltipClass="mat-tooltip-for-users"
                  class="ellipsis"
                >
                  {{ user }}
                  <a class="material-icons" (click)="removeUser(element.users, user)">clear</a>
                </mat-chip>
              </mat-chip-list>
            </div>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef class="actions"></th>
        <td mat-cell *matCellDef="let element" class="actions">
          <div class="actions-wrapper">
            <span 
              class="action-disabled"
              matTooltip="Only admin can delete group."
              matTooltipPosition="above"
              [matTooltipDisabled]="healthStatus?.admin"
            >
              <span
                (click)="manageAction('delete', 'group', element)"
                class="reset ani"
                [ngClass]="{ 'not-allowed' : !healthStatus?.admin}"
              >
                <mat-icon >delete_forever</mat-icon>
              </span>
            </span>

            <span 
              class="apply ani big-icon" 
              matTooltip="Group cannot be updated without any selected role"
              matTooltipPosition="above" 
              [matTooltipDisabled]="element.selected_roles.length > 0"
              [ngClass]="{ 'not-allowed' : !element.selected_roles.length || isGroupChanded(element)}"
              (click)="manageAction('update', 'group', element)"
            >
              <mat-icon [ngClass]="{'big-icon': !isGroupChanded(element) && element.selected_roles.length}">done</mat-icon>
            </span>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>

  <inform-message [message]="noPermissionMessage" *ngIf="!healthStatus?.admin && healthStatus?.projectAdmin && !groupsData.length"></inform-message>
</div>