TSK-1502: Small improvements in workbasket details

web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html

@@ -5,14 +5,12 @@
 		[ngStyle]="{'width': expanded ? 'calc(' + 100 + 'vw - 500px)' : 'calc(' + 100 + 'vw - 250px)'}">
 		<div class=" workbasket-access-items__buttons">
 			<button mat-stroked-button matTooltip="Add new access" type="button"
-				class="workbasket-access-items__buttons-add-access" (click)="addAccessItem()" data-toggle="tooltip"
+				class="workbasket-access-items__buttons-add-access" (click)="addAccessItem()">
-				title="Add new access">
 				Add new access
 				<mat-icon color="green-blue" aria-label="add new access">add</mat-icon>
 			</button>
 			<button mat-stroked-button matTooltip="Delete selected access" type="button"
-				class="workbasket-access-items__buttons-delete-access" (click)="deleteAccessItems()"
+				class="workbasket-access-items__buttons-delete-access" (click)="deleteAccessItems()">
-				data-toggle="tooltip" title="delete selected access">
 				Delete selected access
 				<mat-icon color="green-blue" aria-label="delete access">delete</mat-icon>
 			</button>

web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.spec.ts

@@ -167,7 +167,6 @@ describe('WorkbasketAccessItemsComponent', () => {
       'button.workbasket-access-items__buttons-add-access'
     );
     const clearSpy = jest.spyOn(component, 'addAccessItem');
-    expect(addAccessItemButton.title).toMatch('Add new access');
 
     addAccessItemButton.click();
     expect(clearSpy).toHaveBeenCalled();

web/src/app/administration/components/workbasket-details/workbasket-details.component.html

@@ -1,6 +1,7 @@
 <div class="workbasket-details">
   <mat-toolbar class="workbasket-details__toolbar">
-    <h4 class="workbasket-details__title">{{workbasket.name}}&nbsp;
+    <h4 class="workbasket-details__title">
+      <span class="workbasket-details__title-name">{{workbasket.name}}</span>
       <span class="workbasket-details__title-badge" *ngIf="!workbasket.workbasketId"> {{ badgeMessage }}</span>
     </h4>
     <span class="workbasket-details__spacer"></span>
@@ -13,7 +14,7 @@
     <button mat-stroked-button class="workbasket-details__button" matTooltip="Revert changes to previous saved state"
       (click)="onRestore()">
       Undo Changes
-      <mat-icon class="button__green-blue md-20">restore</mat-icon>
+      <mat-icon class="workbasket-details__button-aquamarine md-20">restore</mat-icon>
     </button>
 
     <button mat-stroked-button [matMenuTriggerFor]="buttonMenu" matTooltip="More actions" class="action-toolbar__button"
@@ -24,17 +25,17 @@
     <mat-menu #buttonMenu="matMenu">
       <button mat-menu-item class="workbasket-details__dropdown"
         matTooltip="Copy current values to create new workbasket" (click)="onCopy()">
-        <mat-icon class="button__green-blue">content_copy</mat-icon>
+        <mat-icon class="workbasket-details__button-aquamarine">content_copy</mat-icon>
         <span>Copy</span>
       </button>
       <button mat-menu-item class="workbasket-details__dropdown"
         matTooltip="Remove this workbasket as distribution target" (click)="onRemoveAsDistributionTarget()">
-        <mat-icon class="button__red">remove_circle_outline</mat-icon>
+        <mat-icon class="workbasket-details__button-red">remove_circle_outline</mat-icon>
         <span>Remove as distribution target</span>
       </button>
       <button mat-menu-item class="workbasket-details__dropdown" matTooltip="Delete this workbasket"
         (click)="onRemoveWorkbasket()">
-        <mat-icon class="button__red">delete</mat-icon>
+        <mat-icon class="workbasket-details__button-red">delete</mat-icon>
         <span>Delete</span>
       </button>
       <button mat-menu-item class="workbasket-details__dropdown" style="border-bottom-style: none;"
@@ -59,4 +60,4 @@
       </taskana-administration-workbasket-distribution-targets>
     </mat-tab>
   </mat-tab-group>
-</div>
+</div>

web/src/app/administration/components/workbasket-details/workbasket-details.component.scss

@@ -1,32 +1,47 @@
 @import 'src/theme/_colors.scss';
 
-.workbasket-details__toolbar {
+.workbasket-details {
-  background-color: white;
+  &__toolbar {
-  padding: 16px 36px 12px 24px;
+    background-color: white;
-}
+    padding: 16px 36px 12px 24px;
-.workbasket-details__title {
+  }
-  font-size: 1.5rem;
+
-  padding: 4px;
+  &__title {
-}
+    font-size: 1.5rem;
-.workbasket-details__title-badge {
+    padding: 4px;
-  background-color: $brown;
+  }
-  border-radius: 4px;
+
-}
+  &__title-name {
-.workbasket-details__spacer {
+    display: block;
-  flex: 1 1 auto;
+    max-width: 392px;
-}
+    overflow: hidden;
-.workbasket-details__button {
+    text-overflow: ellipsis;
-  margin-right: 6px;
+  }
-}
+
-.workbasket-details__save-button {
+  &__title-badge {
-  background-color: $aquamarine;
+    background-color: $brown;
-  color: white;
+    border-radius: 4px;
+  }
+
+  &__spacer {
+    flex: 1 1 auto;
+  }
+
+  &__button {
+    margin-right: 6px;
+  }
+
+  &__save-button {
+    background-color: $aquamarine;
+    color: white;
+  }
+
+  &__button-aquamarine {
+    color: $aquamarine;
+  }
+
+  &__button-red {
+    color: $invalid;
+  }
 }
 
-.button__green-blue {
-  color: $aquamarine;
-}
-
-.button__red {
-  color: $invalid;
-}

web/src/app/administration/components/workbasket-information/workbasket-information.component.html

@@ -1,35 +1,4 @@
 <div *ngIf="workbasket" id="wb-information">
-  <!--
-  <div class="panel-heading">
-    <div class="pull-right btn-group">
-      <button type="button" (click)="onSubmit()" data-toggle="tooltip" title="Save"
-              class="btn btn-default btn-primary">
-        <span class="material-icons md-20">save</span>
-      </button>
-      <button type="button" (click)="onUndo()" data-toggle="tooltip" title="Undo Changes"
-              class="btn btn-default">
-        <span class="material-icons md-20 blue">undo</span>
-      </button>
-      <button type="button" (click)="removeDistributionTargets()" data-toggle="tooltip"
-              title="Remove workbasket as distribution target"
-              class="btn btn-default">
-        <span class="material-icons md-20 red">remove_circle_outline</span>
-      </button>
-      <button type="button" (click)="copyWorkbasket()" data-toggle="tooltip" title="Copy"
-              class="btn btn-default">
-        <span class="material-icons md-20 green-blue">content_copy</span>
-      </button>
-      <button type="button" (click)="removeWorkbasket()" data-toggle="tooltip" title="Remove"
-              class="btn btn-default">
-        <span class="material-icons md-20 red">delete</span>
-      </button>
-    </div>
-    <h4 class="panel-header">{{workbasket.name}}&nbsp;
-      <span *ngIf="!workbasket.workbasketId" class="badge warning"> {{badgeMessage}}</span>
-    </h4>
-  </div>
-  -->
-
 
   <div class="workbasket-information-wrapper">
     <ng-form #WorkbasketForm="ngForm">
@@ -54,7 +23,7 @@
                      (input)="validateInputOverflow(key, 64, $event)">
             </mat-form-field>
             <div *ngIf="inputOverflowMap.get(key.name)" class="error">{{lengthError}}</div>
-            <taskana-shared-field-error-display [displayError]="!isFieldValid('workbasket.key')"
+            <taskana-shared-field-error-display *ngIf="action != 3" [displayError]="!isFieldValid('workbasket.key')"
                                                 [validationTrigger]="this.toggleValidationMap.get('workbasket.key')" errorMessage="* Key is required">
             </taskana-shared-field-error-display>
 
@@ -113,7 +82,7 @@
                 <mat-form-field appearance="outline" style="width: 100%">
                   <mat-label>Description</mat-label>
                   <label for="workbasket-description"></label>
-                  <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="5" cdkAutosizeMaxRows="10" maxlength="255"
+                  <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="7" cdkAutosizeMaxRows="7" maxlength="255"
                             id="workbasket-description" placeholder="Description" [(ngModel)]="workbasket.description"
                             name="workbasket.description" #description="ngModel"
                             (input)="validateInputOverflow(description, 255)"></textarea>

web/src/app/shared/components/type-ahead/type-ahead.component.html

@@ -1,10 +1,9 @@
 <div *ngIf="dataSource" class="typeahead">
   <form>
     <mat-form-field class="typeahead__form" appearance="outline">
-      <mat-label *ngIf="!isFirst">
+      <mat-label>
-        {{dataSource.selected?.name ? 'Name: ' + dataSource.selected?.name : placeHolderMessage}}</mat-label>
+        {{dataSource.selected?.name && placeHolderMessage !== 'Owner' ? dataSource.selected?.name : placeHolderMessage}}
-      <mat-label *ngIf="isFirst">
+      </mat-label>
-        {{dataSource.selected?.name}}</mat-label>
       <input #inputTypeAhead [required]="isRequired" class="typeahead__form-input align" matInput type="text"
         [matAutocomplete]="auto" placeholder="{{placeHolderMessage}}" [(ngModel)]="value" name="accessId"
         (ngModelChange)="initializeDataSource()" />
@@ -16,4 +15,4 @@
       </mat-autocomplete>
     </mat-form-field>
   </form>
-</div>
+</div>