Highlight list filters & fix cf events list clear filter (#4749)

* Highlight list filters & fix cf events list clear filter
- In list header highlight values that effect the list
  - multi filters
  - text filters
  - sort
  - chips
- This includes custom filters that live outside of the list component
  - cf events list
  - helm charts list
- Also fix an issue in the cf events list where the actee filter's `x` button was not visible on click of actee

* Don't highlight sort field selector

src/frontend/packages/cloud-foundry/src/shared/components/cloud-foundry-events-list/cloud-foundry-events-list.component.ts

@@ -125,13 +125,12 @@ export class CloudFoundryEventsListComponent implements OnInit, OnDestroy {
       this.config.getEventFilters().pipe(
         distinctUntilChanged()
       ).subscribe(params => {
-
         if (!this.initialSet) {
-          this.filtersFormGroup.controls.type.setValue(params.type);
-          this.filtersFormGroup.controls.actee.setValue(params.actee);
+          this.updateType(params.type);
+          this.updateActee(params.actee);
           this.initialSet = true;
         } else if (this.filtersFormGroup.controls.actee.value !== params.actee) {
-          this.filtersFormGroup.controls.actee.setValue(params.actee);
+          this.updateActee(params.actee);
         }
       })
     );
@@ -161,7 +160,18 @@ export class CloudFoundryEventsListComponent implements OnInit, OnDestroy {
   }
 
   public clearActeeFilter() {
-    this.filtersFormGroup.patchValue({actee: ''});
+    this.filtersFormGroup.patchValue({ actee: '' });
+  }
+
+  private updateType(type: string[]) {
+    this.filtersFormGroup.controls.type.setValue(type);
+    this.filtersFormGroup.controls.type.markAsDirty();
+  }
+
+  private updateActee(actee: string) {
+    this.filtersFormGroup.controls.actee.setValue(actee);
+    this.filtersFormGroup.controls.actee.markAsDirty();
+    this.hasActeeFilter = !!actee;
   }
 
 }

src/frontend/packages/core/src/shared/components/list/list.component.theme.scss

@@ -5,6 +5,7 @@
   $foreground-colors: map-get($theme, foreground);
   $background-colors: map-get($theme, background);
   $is-dark: map-get($theme, is-dark);
+  $accent: map-get($theme, accent);
 
   $header-selected-color: #fff;
   @if $is-dark == true {
@@ -24,6 +25,19 @@
           flex-wrap: wrap;
         }
       }
+
+      @include accent(mat-color($accent));
+      .sort {
+        @include accent(unset)
+      }
     }
   }
 }
+
+@mixin accent($colour) {
+  .mat-select-value-text,
+  .mat-input-element.ng-dirty,
+  .mat-chip {
+    color: $colour;
+  }
+}