From 5f94d310561d0a7c7f06e552ce7f4f8b44debb11 Mon Sep 17 00:00:00 2001
From: Sofie Hofmann <29145005+sofie29@users.noreply.github.com>
Date: Tue, 26 Jan 2021 12:47:24 +0100
Subject: [PATCH] TSK-1043: Fix access-items table width

---
 .../classification-overview.component.spec.ts               | 3 ++-
 .../workbasket-access-items.component.scss                  | 4 ++--
 .../workbasket-access-items.component.spec.ts               | 4 +++-
 .../workbasket-access-items.component.ts                    | 6 +++---
 .../workbasket-information.component.spec.ts                | 4 +++-
 .../workbasket-list-toolbar.component.spec.ts               | 3 ++-
 .../shared/components/type-ahead/type-ahead.component.html  | 4 ++--
 .../components/type-ahead/type-ahead.component.spec.ts      | 4 ++--
 8 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web/src/app/administration/components/classification-overview/classification-overview.component.spec.ts b/web/src/app/administration/components/classification-overview/classification-overview.component.spec.ts
index feb08d5e5..bb4332449 100644
--- a/web/src/app/administration/components/classification-overview/classification-overview.component.spec.ts
+++ b/web/src/app/administration/components/classification-overview/classification-overview.component.spec.ts
@@ -39,7 +39,8 @@ const classificationServiceSpy = jest.fn().mockImplementation(
 );
 const domainServiceSpy = jest.fn().mockImplementation(
   (): Partial<DomainService> => ({
-    getSelectedDomainValue: jest.fn().mockReturnValue(of())
+    getSelectedDomainValue: jest.fn().mockReturnValue(of()),
+    getSelectedDomain: jest.fn().mockReturnValue(of('A'))
   })
 );
 
diff --git a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.scss b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.scss
index 6ac5f4f77..181e80776 100644
--- a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.scss
+++ b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.scss
@@ -9,8 +9,8 @@
 
   &__typeahead {
     text-align: left;
-    min-width: 180px;
-    width: calc(100% + 20px);
+    min-width: 124px;
+    max-width: 124px;
     line-height: 20px;
     padding-bottom: 0% !important;
     margin-top: 5px;
diff --git a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.spec.ts b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.spec.ts
index 8d4c3a0ce..89e088496 100644
--- a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.spec.ts
+++ b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.spec.ts
@@ -37,6 +37,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({ selector: 'taskana-shared-spinner', template: '' })
 class SpinnerStub {
@@ -93,7 +94,8 @@ describe('WorkbasketAccessItemsComponent', () => {
         MatAutocompleteModule,
         MatProgressBarModule,
         MatCheckboxModule,
-        MatIconModule
+        MatIconModule,
+        MatTooltipModule
       ],
       declarations: [WorkbasketAccessItemsComponent, TypeAheadComponent, SpinnerStub],
       providers: [
diff --git a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
index 644c8bcb8..aa017bdcd 100644
--- a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
+++ b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.ts
@@ -101,10 +101,10 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
   ngOnInit() {
     this.init();
     this.customFields$ = this.accessItemsCustomization$.pipe(getCustomFields(customFieldCount));
-    this.customFields$.subscribe((v) => {
+    this.customFields$.pipe(takeUntil(this.destroy$)).subscribe((v) => {
       this.customFields = v;
     });
-    this.accessItemsRepresentation$.subscribe((accessItemsRepresentation) => {
+    this.accessItemsRepresentation$.pipe(takeUntil(this.destroy$)).subscribe((accessItemsRepresentation) => {
       if (typeof accessItemsRepresentation !== 'undefined') {
         this.accessItemsRepresentation = { ...accessItemsRepresentation };
         this.setAccessItemsGroups(accessItemsRepresentation.accessItems);
@@ -142,7 +142,7 @@ export class WorkbasketAccessItemsComponent implements OnInit, OnChanges, OnDest
   }
 
   ngAfterViewInit() {
-    this.inputs.changes.subscribe((next) => {
+    this.inputs.changes.pipe(takeUntil(this.destroy$)).subscribe((next) => {
       if (typeof next.last !== 'undefined') {
         if (this.added) next.last.nativeElement.focus();
       }
diff --git a/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts b/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts
index 07cc9536e..75efe8b92 100644
--- a/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts
+++ b/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts
@@ -39,6 +39,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({ selector: 'taskana-shared-field-error-display', template: '' })
 class FieldErrorDisplayStub {
@@ -112,7 +113,8 @@ describe('WorkbasketInformationComponent', () => {
         MatFormFieldModule,
         MatInputModule,
         MatSelectModule,
-        MatAutocompleteModule
+        MatAutocompleteModule,
+        MatTooltipModule
       ],
       declarations: [
         WorkbasketInformationComponent,
diff --git a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts
index 6b45b24a2..db7967d2f 100644
--- a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts
+++ b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts
@@ -23,7 +23,8 @@ import { WorkbasketQueryFilterParameter } from '../../../shared/models/workbaske
 const getDomainFn = jest.fn().mockReturnValue(true);
 const domainServiceMock = jest.fn().mockImplementation(
   (): Partial<DomainService> => ({
-    getDomains: getDomainFn
+    getDomains: getDomainFn,
+    getSelectedDomain: jest.fn().mockReturnValue(of('A'))
   })
 );
 
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
index 037d48bc3..9373fdf24 100644
--- a/web/src/app/shared/components/type-ahead/type-ahead.component.html
+++ b/web/src/app/shared/components/type-ahead/type-ahead.component.html
@@ -6,10 +6,10 @@
       </mat-label>
       <input #inputTypeAhead [required]="isRequired" class="typeahead__form-input align" matInput type="text"
         [matAutocomplete]="auto" placeholder="{{placeHolderMessage}}" [(ngModel)]="value" name="accessId"
-        (ngModelChange)="initializeDataSource()" />
+        (ngModelChange)="initializeDataSource()" matTooltip="{{value}}"/>
       <mat-autocomplete #autoComplete autoActiveFirstOption (optionSelected)="typeaheadOnSelect($event)"
         #auto="matAutocomplete">
-        <mat-option class="typeahead__form-options" *ngFor="let item of items" [value]="item.accessId">
+        <mat-option class="typeahead__form-options" *ngFor="let item of items" [value]="item.accessId" matTooltip="{{item.accessId}} {{item.name}}">
           <small>{{item.accessId}}&nbsp;&nbsp;{{item.name}}</small>
         </mat-option>
       </mat-autocomplete>
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.spec.ts b/web/src/app/shared/components/type-ahead/type-ahead.component.spec.ts
index 26db1af76..3f937638f 100644
--- a/web/src/app/shared/components/type-ahead/type-ahead.component.spec.ts
+++ b/web/src/app/shared/components/type-ahead/type-ahead.component.spec.ts
@@ -13,8 +13,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
-import { compileComponentFromMetadata, componentFactoryName } from '@angular/compiler';
-import { AccessIdDefinition } from 'app/shared/models/access-id';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 const AccessIdsServiceSpy = jest.fn().mockImplementation(
   (): Partial<AccessIdsService> => ({
@@ -40,6 +39,7 @@ describe('TypeAheadComponent', () => {
         MatAutocompleteModule,
         MatFormFieldModule,
         MatInputModule,
+        MatTooltipModule,
         FormsModule,
         BrowserAnimationsModule
       ],