TSK-1714: Show tooltip on Access Item label to see complete name

Taskana · Sep 16, 2021 · a054c45 · a054c45
1 parent e579720
commit a054c45
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/web/cypress/integration/workbaskets/workbaskets.spec.js b/web/cypress/integration/workbaskets/workbaskets.spec.js
@@ -75,7 +75,10 @@ context('TASKANA Workbaskets', () => {
     cy.get('button[mattooltip="Add new access"')
       .click()
       .then(() => {
-        cy.get('mat-form-field').contains('mat-form-field', 'Access id').find('input').type('teamlead-2');
+        cy.get('mat-form-field')
+          .contains('mat-form-field', 'Access id')
+          .find('input')
+          .type('teamlead-2', { force: true });
         cy.get('input[aria-label="checkAll"]:first').click();
         cy.saveWorkbaskets();
       });

diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss
@@ -71,3 +71,7 @@
 ::ng-deep .mat-drawer {
   overflow-y: visible !important;
 }
+
+::ng-deep mat-tooltip-component {
+  word-break: break-word;
+}
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.html b/web/src/app/shared/components/type-ahead/type-ahead.component.html
@@ -1,14 +1,17 @@
 <form [formGroup]="accessIdForm">
   <div [ngClass]="placeHolderMessage == 'Access id'? 'type-ahead--small' : 'type-ahead--large'">
     <mat-form-field class="type-ahead__form-field" appearance="outline">
-    <mat-label>{{name || placeHolderMessage}}</mat-label>
+    <mat-label class="type-ahead__label" matTooltip="{{name}}" matTooltipPosition="above">
+      {{name || placeHolderMessage}}
+    </mat-label>
     <!-- TEXT INPUT -->
     <input matInput
            type="text"
            placeholder="{{placeHolderMessage}}"
            formControlName="accessId"
            [required]="isRequired"
            [matAutocomplete]="auto"
+           matTooltip="{{accessIdForm.controls['accessId'].value}}"
           class="type-ahead__input-field">
     <!-- ERROR MESSAGE -->
     <mat-error

diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.scss b/web/src/app/shared/components/type-ahead/type-ahead.component.scss
@@ -32,3 +32,7 @@
 .invalid {
   color: $invalid;
 }
+
+mat-label.type-ahead__label {
+  pointer-events: auto;
+}