Reduce calls to isDirty for filterable dropdowns

And make disabled more visually obvious

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -35,8 +35,8 @@
           <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>
-      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
+      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty">
-        <small class="ms-2" [ngClass]="{'fw-bold': selectionModel.isDirty()}" i18n>Apply</small>
+        <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
         <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
         </svg>

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss

@@ -13,6 +13,10 @@
     max-height: 400px;
     overflow-y: scroll;
   }
+
+  button:disabled {
+    opacity: 0.2;
+  }
 }
 
 .btn-group-xs {

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -275,8 +275,13 @@ export class FilterableDropdownComponent {
     return this.selectionModel.selectionSize() > 1 && this.selectionModel.getExcludedItems().length == 0
   }
 
+  modelIsDirty: boolean = false
+
   constructor(private filterPipe: FilterPipe) {
     this.selectionModel = new FilterableDropdownSelectionModel()
+    this.selectionModelChange.subscribe(updatedModel => {
+      this.modelIsDirty = updatedModel.isDirty()
+    })
   }
 
   applyClicked() {