You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/03/10 12:33:44 UTC

[incubator-dlab] branch DLAB-384 updated (8041fec -> 62eb77e)

This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a change to branch DLAB-384
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git.


    from 8041fec  Added type field on roles page
     new 4aa4e44  [DLAB-384]: Added grouped role list to group creation
     new 4bd021f  Merge branch 'DLAB-384' of github.com:apache/incubator-dlab into DLAB-384
     new fff105c  Merge branch 'DLAB-384' of github.com:apache/incubator-dlab into DLAB-384
     new 62eb77e  [DLAB-384]: Grouped roles

The 4 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../app/administration/roles/roles.component.html  | 65 ++++++----------------
 .../app/administration/roles/roles.component.scss  | 10 +++-
 .../app/administration/roles/roles.component.ts    | 27 ++++-----
 .../multi-level-select-dropdown.component.html     | 14 ++---
 .../multi-level-select-dropdown.component.scss     |  2 +-
 .../multi-level-select-dropdown.component.ts       | 32 +++++------
 .../resources/webapp/src/assets/styles/_theme.scss |  6 ++
 7 files changed, 65 insertions(+), 91 deletions(-)


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 03/04: Merge branch 'DLAB-384' of github.com:apache/incubator-dlab into DLAB-384

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-384
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit fff105cf800bcf0a546cfc14cafc6b27ef0c86b2
Merge: 4bd021f 8041fec
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Fri Mar 6 12:34:26 2020 +0200

    Merge branch 'DLAB-384' of github.com:apache/incubator-dlab into DLAB-384

 .../src/main/java/com/epam/dlab/backendapi/dao/UserRoleDaoImpl.java     | 2 ++
 1 file changed, 2 insertions(+)


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 04/04: [DLAB-384]: Grouped roles

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-384
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit 62eb77edaf068ac97be77162469b988818d3f79d
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Mar 10 14:33:26 2020 +0200

    [DLAB-384]: Grouped roles
---
 .../app/administration/roles/roles.component.html  | 64 ++++------------------
 .../app/administration/roles/roles.component.ts    | 27 ++++-----
 .../multi-level-select-dropdown.component.html     | 14 ++---
 .../multi-level-select-dropdown.component.scss     |  2 +-
 .../multi-level-select-dropdown.component.ts       | 32 +++++------
 5 files changed, 46 insertions(+), 93 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
index ac3f1d7..0a7c8e2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
@@ -45,6 +45,7 @@
               class="material-icons">keyboard_arrow_right</i></button>
         </div>
       </mat-step>
+
       <mat-step [completed]='false'>
         <ng-template matStepLabel>Users</ng-template>
         <div class="inner-step mat-reset">
@@ -58,6 +59,7 @@
               class="material-icons">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">
@@ -66,36 +68,8 @@
               (selectionChange)="onUpdate($event)"
               name="roles"
               [items]="rolesList"
-              [model]="setupRoles"
-            >
- <!--           [type]="element.group" -->
+              [model]="setupRoles">
             </multi-level-select-dropdown>
-<!--            <mat-form-field>-->
-
-<!--              <mat-select-->
-<!--                multiple [compareWith]="compareObjects"-->
-<!--                name="roles"-->
-<!--                -->
-<!--                disableOptionCentering-->
-<!--                placeholder="Select roles"-->
-<!--                panelClass="select-role"-->
-<!--              >-->
-<!--                <mat-option class="multiple-select" disabled>-->
-<!--                  <a class="select ani" (click)="selectAllOptions(setupRoles, rolesList)">-->
-<!--                    <i class="material-icons">playlist_add_check</i>&nbsp;All-->
-<!--                  </a>-->
-<!--                  <a class="deselect ani" (click)="selectAllOptions(setupRoles)">-->
-<!--                    <i class="material-icons">clear</i>&nbsp;None-->
-<!--                  </a>-->
-<!--                </mat-option>-->
-<!--                <mat-option *ngFor="let role of rolesList" [value]="role">-->
-<!--                  {{ role }}-->
-<!--                </mat-option>-->
-<!--              </mat-select>-->
-<!--              <button class="caret">-->
-<!--                <i class="material-icons">keyboard_arrow_down</i>-->
-<!--              </button>-->
-<!--            </mat-form-field>-->
           </div>
         </div>
         <div class="text-center m-bott-10">
@@ -103,9 +77,10 @@
               class="material-icons">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 > 0">Create</button>
+            [disabled]="!setupGroup || setupGroupName.errors?.patterns || setupGroupName.errors?.duplicate || !setupRoles.length">Create</button>
         </div>
       </mat-step>
+
     </mat-horizontal-stepper>
   </mat-card>
   <mat-divider></mat-divider>
@@ -121,30 +96,13 @@
         <th mat-header-cell *matHeaderCellDef class="roles"> Roles </th>
         <td mat-cell *matCellDef="let element" class="roles">
           <div class="inner-step mat-reset">
-<!--            <div class="selector-wrapper-edit">-->
-<!--              <mat-form-field class="select">-->
-<!--                <mat-select multiple [compareWith]="compareObjects" name="selected_roles" disableOptionCentering-->
-<!--                  [(value)]="element.selected_roles" placeholder="Select roles" class="roles-select" panelClass="select-role">-->
-<!--                  <mat-option class="multiple-select" disabled>-->
-<!--                    <a class="select ani" (click)="selectAllOptions(element, rolesList, 'selected_roles')">-->
-<!--                      <i class="material-icons">playlist_add_check</i>&nbsp;All-->
-<!--                    </a>-->
-<!--                    <a class="deselect ani" (click)="selectAllOptions(element, null, 'selected_roles')">-->
-<!--                      <i class="material-icons">clear</i>&nbsp;None-->
-<!--                    </a>-->
-<!--                  </mat-option>-->
-<!--                  <mat-option *ngFor="let role of rolesList" [value]="role">-->
-<!--                    {{ role }}-->
-<!--                  </mat-option>-->
-<!--                </mat-select>-->
-<!--                <button class="caret">-->
-<!--                  <i class="material-icons">keyboard_arrow_down</i>-->
-<!--                </button>-->
-<!--              </mat-form-field>-->
-              <multi-level-select-dropdown  (selectionChange)="onUpdate($event)" [type]="element.group" [items]="rolesList" [model]="rolesList"></multi-level-select-dropdown>
-<!--                                            [model]="element.selected_roles"-->
+              <multi-level-select-dropdown
+                (selectionChange)="onUpdate($event)"
+                [type]="element.group"
+                [items]="rolesList"
+                [model]="element.selected_roles">
 
-<!--            </div>-->
+              </multi-level-select-dropdown>
           </div>
         </td>
       </ng-container>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
index 88c9fda..974f049 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.ts
@@ -41,7 +41,7 @@ export class RolesComponent implements OnInit {
   public setupGroup: string = '';
   public setupUser: string = '';
   public manageUser: string = '';
-  public setupRoles: Array<string> = [];
+  public setupRoles: Array<any> = [];
   public updatedRoles: Array<string> = [];
   public healthStatus: any;
   public delimitersRegex = /[-_]?/g;
@@ -71,13 +71,7 @@ export class RolesComponent implements OnInit {
         (roles: any) => {
           this.roles = roles;
           this.rolesList = roles.map((role, index) => {
-            if (index < 10) {
-              return {role: role.description, label: 'templetes'};
-            } else if (index > 9 && index < 20) {
-              return {role: role.description, label: 'Inctance shapes'};
-            } else {
-              return {role: role.description, label: 'Resource'};
-            }
+              return {role: role.description, type: role.type};
           });
 
           this.updateGroupData(groups);
@@ -110,7 +104,7 @@ export class RolesComponent implements OnInit {
           action, type, value: {
             name: this.setupGroup,
             users: this.setupUser ? this.setupUser.split(',').map(elem => elem.trim()) : [],
-            roleIds: this.extractIds(this.roles, this.setupRoles)
+            roleIds: this.extractIds(this.roles, this.setupRoles.map(v => v.role))
           }
         });
       this.stepperView = false;
@@ -133,7 +127,7 @@ export class RolesComponent implements OnInit {
       this.manageRolesGroups({
         action, type, value: {
           name: item.group,
-          roleIds: this.extractIds(this.roles, item.selected_roles),
+          roleIds: this.extractIds(this.roles, item.selected_roles.map(v => v.role)),
           users: item.users || []
         }
       });
@@ -183,7 +177,7 @@ export class RolesComponent implements OnInit {
   public updateGroupData(groups) {
     this.groupsData = groups.map(v => v).sort((a, b) => (a.group > b.group) ? 1 : ((b.group > a.group) ? -1 : 0));
     this.groupsData.forEach(item => {
-      item.selected_roles = item.roles.map(role => role.description);
+      item.selected_roles = item.roles.map(role => ({role: role.description, type: role.type}));
     });
   }
 
@@ -201,10 +195,6 @@ export class RolesComponent implements OnInit {
     });
   }
 
-  public compareObjects(o1: any, o2: any): boolean {
-    return o1.toLowerCase() === o2.toLowerCase();
-  }
-
   public resetDialog() {
     this.stepperView = false;
     this.setupGroup = '';
@@ -230,7 +220,11 @@ export class RolesComponent implements OnInit {
   }
 
   public onUpdate($event): void {
-    this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model;
+   if ($event.type) {
+     this.groupsData.filter(group => group.group === $event.type)[0].selected_roles = $event.model;
+   } else {
+     this.setupRoles = $event.model;
+   }
   }
 }
 
@@ -254,6 +248,7 @@ export class RolesComponent implements OnInit {
   `,
   styles: [`.group-name { max-width: 96%; display: inline-block; vertical-align: bottom; }`]
 })
+
 export class ConfirmDeleteUserAccountDialogComponent {
   constructor(
     public dialogRef: MatDialogRef<ConfirmDeleteUserAccountDialogComponent>,
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
index 1cc1c11..f6b52da 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html
@@ -38,18 +38,18 @@
       </li>
 
         <ng-template  ngFor let-item [ngForOf]="items" let-i="index">
-          <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.label !== items[i - 1].label" (click)="toggleItemsForLable(item.label, $event)">
+          <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)">
             <a href="#" class="list-item" role="menuitem">
-              <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.label], 'arrow-checked': selectedAllInCattegory(item.label) || selectedSomeInCattegory(item.label)}"></span>
-              <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.label) || selectedSomeInCattegory(item.label)}" (click)="toggleselectedCategory($event, model, item.label);$event.stopPropagation()" >
-                <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.label)"></span>
-                <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.label)"></span>
+              <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}"></span>
+              <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >
+                <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>
+                <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>
               </span>
-              {{item.label}}
+              {{labels[item.type] || item.type | titlecase}}
             </a>
           </li>
 
-          <li class="role-item" role="presentation" *ngIf="model && isOpenCategory[item.label]" >
+          <li class="role-item" role="presentation" *ngIf="model && isOpenCategory[item.type]" >
             <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions($event, model, item)">
               <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">
                 <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
index 1726f47..00d9a80 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
@@ -75,7 +75,7 @@
 
     .selected-items {
       color: #4a5c89;
-      max-width: 500px;
+      max-width: 477px;
     }
   }
 }
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
index dc70999..fe8b36a 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts
@@ -26,7 +26,6 @@ import { Input, Output, Component, EventEmitter } from '@angular/core';
 })
 
 export class MultiLevelSelectDropdownComponent {
-  isOpen: boolean = false;
 
   @Input() items: Array<any>;
   @Input() model: Array<any>;
@@ -36,30 +35,31 @@ export class MultiLevelSelectDropdownComponent {
   public isOpenCategory = {
   };
 
+  public labels = {
+    COMPUTATIONAL_SHAPE: 'Compute shapes',
+    NOTEBOOK_SHAPE: 'Notebook shape'
+  };
+
   toggleSelectedOptions($event, model, value) {
     $event.preventDefault();
-    const currRole = this.model.filter(v => v.role === value.role).length;
+    const currRole = model.filter(v => v.role === value.role).length;
     currRole ? this.model = model.filter(v => v.role !== value.role) : model.push(value);
-
     this.onUpdate($event);
-
-    $event.preventDefault();
   }
 
   toggleselectedCategory($event, model, value) {
     $event.preventDefault();
-    const categoryItems = this.items.filter(role => role.label === value);
-    this.selectedAllInCattegory(value) ? this.model = this.model.filter(role => role.label !== value) : categoryItems.forEach(role => {
-      if (!model.includes(role)) {model.push(role); }
+    const categoryItems = this.items.filter(role => role.type === value);
+    this.selectedAllInCattegory(value) ? this.model = this.model.filter(role => role.type !== value) : categoryItems.forEach(role => {
+      if (!model.filter(mod => mod.role === role.role).length) {this.model.push(role); }
     });
     this.onUpdate($event);
   }
 
   selectAllOptions($event) {
-    $event.preventDefault();
-    this.model = [];
-    this.items.forEach((item) => { this.model.push(item); });
 
+    $event.preventDefault();
+    this.model = [...this.items];
     this.onUpdate($event);
     $event.preventDefault();
   }
@@ -71,7 +71,7 @@ export class MultiLevelSelectDropdownComponent {
   }
 
   onUpdate($event): void {
-    this.selectionChange.emit({ model: this.model.map(v => v.role), type: this.type, $event });
+    this.selectionChange.emit({ model: this.model, type: this.type, $event });
   }
 
   public toggleItemsForLable(label, $event) {
@@ -80,14 +80,14 @@ export class MultiLevelSelectDropdownComponent {
   }
 
   public selectedAllInCattegory(category) {
-    const selected = this.model.filter(role => role.label === category);
-    const categoryItems = this.items.filter(role => role.label === category);
+    const selected = this.model.filter(role => role.type === category);
+    const categoryItems = this.items.filter(role => role.type === category);
     return selected.length === categoryItems.length;
   }
 
   public selectedSomeInCattegory(category) {
-    const selected = this.model.filter(role => role.label === category);
-    const categoryItems = this.items.filter(role => role.label === category);
+    const selected = this.model.filter(role => role.type === category);
+    const categoryItems = this.items.filter(role => role.type === category);
     return selected.length && selected.length !== categoryItems.length;
   }
 


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 02/04: Merge branch 'DLAB-384' of github.com:apache/incubator-dlab into DLAB-384

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-384
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit 4bd021f2e2232eb2fd4ae447c24cfc157d6d79e1
Merge: 4aa4e44 a782f22
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Thu Mar 5 17:06:59 2020 +0200

    Merge branch 'DLAB-384' of github.com:apache/incubator-dlab into DLAB-384

 .../dlab/backendapi/resources/dto/UserRoleDto.java | 10 ++++++++-
 .../src/main/resources/mongo/gcp/mongo_roles.json  | 26 ++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org


[incubator-dlab] 01/04: [DLAB-384]: Added grouped role list to group creation

Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

dgnatyshyn pushed a commit to branch DLAB-384
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git

commit 4aa4e44370f1e8996e8cd00434b0892c8820b104
Author: Dmytro Gnatyshyn <di...@ukr.net>
AuthorDate: Wed Mar 4 14:14:42 2020 +0200

    [DLAB-384]: Added grouped role list to group creation
---
 .../app/administration/roles/roles.component.html  | 59 +++++++++++++---------
 .../app/administration/roles/roles.component.scss  | 10 +++-
 .../resources/webapp/src/assets/styles/_theme.scss |  6 +++
 3 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
index 5015d7a..ac3f1d7 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
@@ -62,31 +62,40 @@
         <ng-template matStepLabel>Roles</ng-template>
         <div class="inner-step mat-reset roles">
           <div class="selector-wrapper">
-            <mat-form-field>
-              <mat-select
-                multiple [compareWith]="compareObjects"
-                name="roles"
-                [(value)]="setupRoles"
-                disableOptionCentering
-                placeholder="Select roles"
-                panelClass="select-role"
-              >
-                <mat-option class="multiple-select" disabled>
-                  <a class="select ani" (click)="selectAllOptions(setupRoles, rolesList)">
-                    <i class="material-icons">playlist_add_check</i>&nbsp;All
-                  </a>
-                  <a class="deselect ani" (click)="selectAllOptions(setupRoles)">
-                    <i class="material-icons">clear</i>&nbsp;None
-                  </a>
-                </mat-option>
-                <mat-option *ngFor="let role of rolesList" [value]="role">
-                  {{ role }}
-                </mat-option>
-              </mat-select>
-              <button class="caret">
-                <i class="material-icons">keyboard_arrow_down</i>
-              </button>
-            </mat-form-field>
+            <multi-level-select-dropdown
+              (selectionChange)="onUpdate($event)"
+              name="roles"
+              [items]="rolesList"
+              [model]="setupRoles"
+            >
+ <!--           [type]="element.group" -->
+            </multi-level-select-dropdown>
+<!--            <mat-form-field>-->
+
+<!--              <mat-select-->
+<!--                multiple [compareWith]="compareObjects"-->
+<!--                name="roles"-->
+<!--                -->
+<!--                disableOptionCentering-->
+<!--                placeholder="Select roles"-->
+<!--                panelClass="select-role"-->
+<!--              >-->
+<!--                <mat-option class="multiple-select" disabled>-->
+<!--                  <a class="select ani" (click)="selectAllOptions(setupRoles, rolesList)">-->
+<!--                    <i class="material-icons">playlist_add_check</i>&nbsp;All-->
+<!--                  </a>-->
+<!--                  <a class="deselect ani" (click)="selectAllOptions(setupRoles)">-->
+<!--                    <i class="material-icons">clear</i>&nbsp;None-->
+<!--                  </a>-->
+<!--                </mat-option>-->
+<!--                <mat-option *ngFor="let role of rolesList" [value]="role">-->
+<!--                  {{ role }}-->
+<!--                </mat-option>-->
+<!--              </mat-select>-->
+<!--              <button class="caret">-->
+<!--                <i class="material-icons">keyboard_arrow_down</i>-->
+<!--              </button>-->
+<!--            </mat-form-field>-->
           </div>
         </div>
         <div class="text-center m-bott-10">
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
index 254d8dd..f2c10d8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.scss
@@ -88,17 +88,23 @@
   }
 }
 
+.mat-horizontal-content-container{
+  overflow: visible !important;
+}
+
 .selector-wrapper {
   display: flex;
   align-self: center;
   width: 490px;
   height: 36px;
-  padding-left: 10px;
+  padding-left: 0;
   font-family: 'Open Sans', sans-serif;
   font-size: 15px;
   font-weight: 300;
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
+  multi-level-select-dropdown{
+    width: 100%;
+  }
   mat-form-field {
     width: 100%;
 
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index 380aa75..292ba70 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -658,3 +658,9 @@ mat-progress-bar {
     background-color: #baf0f7;
   }
 }
+.manage-roles{
+  .mat-horizontal-content-container{
+    overflow: visible !important;
+  }
+}
+


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org