feat: table filters now always show their placeholder even when a selection is made (#1296)

Author: jake-bassett

projects/components/src/multi-select/multi-select.component.ts

@@ -145,6 +145,9 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
   @Input()
   public placeholder?: string;
 
+  @Input()
+  public prefix?: string;
+
   @Input()
   public disabled: boolean = false;
 
@@ -275,13 +278,21 @@ export class MultiSelectComponent<V> implements ControlValueAccessor, AfterConte
         const selectedItems: SelectOptionComponent<V>[] = options.filter(item => this.isSelectedItem(item));
 
         return {
-          label: selectedItems.length === 0 ? this.placeholder : selectedItems[0]?.label,
+          label: this.getLabel(selectedItems),
           selectedItemsCount: selectedItems.length
         };
       })
     );
   }
 
+  private getLabel(selectedItems: SelectOptionComponent<V>[]): string {
+    if (selectedItems.length === 0) {
+      return this.placeholder === undefined ? '' : this.placeholder;
+    }
+
+    return this.prefix === undefined ? selectedItems[0]?.label : `${this.prefix}${selectedItems[0]?.label}`.trim();
+  }
+
   private propagateValueChangeToFormControl(value: V[] | undefined): void {
     this.propagateControlValueChange?.(value);
     this.propagateControlValueChangeOnTouch?.(value);

projects/components/src/table/controls/table-controls-api.ts

@@ -37,6 +37,7 @@ export interface TablePropertyControlOption {
 
 export interface TableSelectControl {
   placeholder: string;
+  prefix?: string;
   isMultiSelect: boolean;
   options: TableSelectControlOption[];
 }

projects/components/src/table/controls/table-controls.component.ts

@@ -48,6 +48,7 @@ import {
             *ngIf="selectControl.isMultiSelect"
             [selected]="this.appliedFilters(selectControl)"
             [placeholder]="selectControl.placeholder"
+            [prefix]="selectControl.prefix"
             class="control select"
             [ngClass]="{ applied: this.appliedFilters(selectControl).length > 0 }"
             showBorder="true"

projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts

@@ -54,6 +54,7 @@ import { InteractionHandler } from '../../interaction/interaction-handler';
 import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model';
 import { TableWidgetBaseModel } from './table-widget-base.model';
 import { SpecificationBackedTableColumnDef } from './table-widget-column.model';
+import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
 import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model';
 import { TableWidgetModel } from './table-widget.model';
 
@@ -232,39 +233,51 @@ export class TableWidgetRendererComponent
             .filter(selectControlModel => selectControlModel.visible)
             .map(selectControlModel => {
               if (selectControlModel.placeholder === changed?.placeholder) {
-                return of(changed);
+                return this.buildTableSelectControl(selectControlModel, changed);
               }
 
-              // Fetch the values for the selectFilter dropdown
-              return selectControlModel.getOptions().pipe(
-                take(1),
-                withLatestFrom(this.selectFilterSubject),
-                map(([options, filters]) => {
-                  const foundPreferences = preferences.selections
-                    ? preferences.selections.find(
-                        preferencesSelectionControl =>
-                          selectControlModel.placeholder === preferencesSelectionControl.placeholder
-                      )
-                    : undefined;
+              const foundPreferences = preferences.selections
+                ? preferences.selections.find(
+                    preferencesSelectionControl =>
+                      selectControlModel.placeholder === preferencesSelectionControl.placeholder
+                  )
+                : undefined;
 
-                  return (
-                    foundPreferences ?? {
-                      placeholder: selectControlModel.placeholder,
-                      isMultiSelect: selectControlModel.isMultiselect,
-                      options: options.map(option => ({
-                        ...option,
-                        applied: this.isFilterApplied(option.metaValue, filters)
-                      }))
-                    }
-                  );
-                })
-              );
+              // Fetch the values for the selectFilter dropdown
+              return this.buildTableSelectControl(selectControlModel, foundPreferences);
             })
         )
       )
     );
   }
 
+  private buildTableSelectControl(
+    model: TableWidgetControlSelectOptionModel,
+    override?: TableSelectControl
+  ): Observable<TableSelectControl> {
+    return model.getOptions().pipe(
+      take(1),
+      withLatestFrom(this.selectFilterSubject),
+      map(([options, filters]) => {
+        const mergedOptions = options.map(option => {
+          const found = override?.options.find(o => o.label === option.label);
+
+          return {
+            ...option,
+            applied: found?.applied || this.isFilterApplied(option.metaValue, filters)
+          };
+        });
+
+        return {
+          placeholder: model.placeholder,
+          prefix: `${model.placeholder}: `,
+          isMultiSelect: model.isMultiselect,
+          options: mergedOptions
+        };
+      })
+    );
+  }
+
   private isFilterApplied(filterOption: TableFilter, appliedFilters: TableFilter[]): boolean {
     // This gets just a little tricky because multiple options for a single select could be IN filtered together
     return (