Minor style fixes

Author: costas80

gitb-ui/ui/src/app/components/multi-select-filter/multi-select-config.ts

@@ -40,5 +40,6 @@ export interface MultiSelectConfig<T extends EntityWithId> {
   squashItemsWithSameText?: boolean
   enableSelectAll?: boolean
   textDecorator?: (item: T) => string
+  iconField?: string
 
 }

gitb-ui/ui/src/app/components/multi-select-filter/multi-select-filter.component.html

@@ -33,6 +33,9 @@
                                 <div class="d-flex">
                                     <input class="form-check-input" type="checkbox" tabIndex="-1" [attr.id]="'item-'+$index" [attr.name]="'item-'+$index" [(ngModel)]="selectedSelectedItems[item.id].selected" (ngModelChange)="updateCheckFlag()" (focus)="selectedItemCheckFocused($event)">
                                     <label class="form-check-label disable-select mx-2" (click)="$event.stopPropagation()" [attr.for]="'item-'+$index">
+                                        @if (config.iconField && item[config.iconField]) {
+                                            <i class="optionIcon" [ngClass]="item[config.iconField]"></i>
+                                        }
                                         {{ item[config.textField] }}
                                         @if (config.textDecorator) {
                                             <span class="item-text-decoration">{{ config.textDecorator(item) }}</span>
@@ -54,11 +57,19 @@
                         @for (item of visibleAvailableItems; track item.id) {
                             <div class="itemContainer" [class]="'available-item-'+$index" [class.focused]="$index == focusedAvailableItemIndex" (click)="availableItemClicked(item)">
                                 @if (config.singleSelection) {
-                                    <div>{{ item[config.textField] }}</div>
+                                    <div>
+                                        @if (config.iconField && item[config.iconField]) {
+                                            <i class="optionIcon" [ngClass]="item[config.iconField]"></i>
+                                        }
+                                        {{ item[config.textField] }}
+                                    </div>
                                 } @else {
                                     <div class="d-flex">
                                         <input class="form-check-input" tabIndex="-1" [attr.id]="'a_item-'+$index" [attr.name]="'a_item-'+$index" type="checkbox" [(ngModel)]="selectedAvailableItems[item.id].selected" (ngModelChange)="updateCheckFlag()" (focus)="availableItemCheckFocused($event)">
                                         <label class="form-check-label disable-select mx-2" (click)="$event.stopPropagation()" [attr.for]="'a_item-'+$index">
+                                            @if (config.iconField && item[config.iconField]) {
+                                                <i class="optionIcon" [ngClass]="item[config.iconField]"></i>
+                                            }
                                             {{ item[config.textField] }}
                                             @if (config.textDecorator) {
                                                 <span class="item-text-decoration">{{ config.textDecorator(item) }}</span>

gitb-ui/ui/src/app/components/multi-select-filter/multi-select-filter.component.less

@@ -121,6 +121,11 @@
                 }
             }
         }
+        .optionIcon {
+            font-size: 14px;
+            margin-right: 8px;
+            margin-left: 6px;
+        }
         &.availableItems {
             overflow-y: auto;
             &.hideBorder {

gitb-ui/ui/src/app/components/test-filter/test-filter.component.ts

@@ -164,7 +164,7 @@ export class TestFilterComponent implements OnInit {
     this.initialiseIfDefined(Constants.FILTER_TYPE.COMMUNITY, { name: Constants.FILTER_TYPE.COMMUNITY, textField: 'sname', loader: this.loadCommunitiesFn, clearItems: new EventEmitter(), replaceSelectedItems: new EventEmitter(), showAsFormControl: true })
     this.initialiseIfDefined(Constants.FILTER_TYPE.ORGANISATION, { name: Constants.FILTER_TYPE.ORGANISATION, textField: 'sname', loader: this.loadOrganisationsFn, clearItems: new EventEmitter(), replaceSelectedItems: new EventEmitter(), showAsFormControl: true })
     this.initialiseIfDefined(Constants.FILTER_TYPE.SYSTEM, { name: Constants.FILTER_TYPE.SYSTEM, textField: 'sname', loader: this.loadSystemsFn, clearItems: new EventEmitter(), replaceSelectedItems: new EventEmitter(), showAsFormControl: true })
-    this.initialiseIfDefined(Constants.FILTER_TYPE.RESULT, { name: Constants.FILTER_TYPE.RESULT, textField: 'label', loader: this.loadTestResults.bind(this), clearItems: new EventEmitter(), replaceSelectedItems: new EventEmitter(), showAsFormControl: true } )
+    this.initialiseIfDefined(Constants.FILTER_TYPE.RESULT, { name: Constants.FILTER_TYPE.RESULT, textField: 'label', iconField: 'icon', loader: this.loadTestResults.bind(this), clearItems: new EventEmitter(), replaceSelectedItems: new EventEmitter(), showAsFormControl: true } )
     if (this.commands) {
       this.commands.subscribe((command) => {
         this.handleCommand(command)
@@ -669,9 +669,9 @@ export class TestFilterComponent implements OnInit {
 
   private loadTestResults(): Observable<IdLabel[]> {
     return of([
-      { id: 0, label: "Success" },
-      { id: 1, label: "Failure" },
-      { id: 2, label: "Incomplete" }
+      { id: 0, label: "Success", icon: this.dataService.iconForTestResult(Constants.TEST_CASE_RESULT.SUCCESS) },
+      { id: 1, label: "Failure", icon: this.dataService.iconForTestResult(Constants.TEST_CASE_RESULT.FAILURE) },
+      { id: 2, label: "Incomplete", icon: this.dataService.iconForTestResult(Constants.TEST_CASE_RESULT.UNDEFINED) }
     ])
   }
 

gitb-ui/ui/src/app/types/id-label.ts

@@ -18,5 +18,6 @@ import { EntityWithId } from "./entity-with-id"
 export interface IdLabel extends EntityWithId {
 
     label: string
+    icon?: string
 
 }