Feat: Search filter

Author: dchyun

packages/components/src/components/hds/filter-bar/filter-group.ts

@@ -21,7 +21,7 @@ import type {
   HdsFilterBarFilters,
   HdsFilterBarFilterType,
   HdsFilterBarData,
-  HdsFilterBarSelectionFilterData,
+  HdsFilterBarGenericFilterData,
   HdsFilterBarRangeFilterData,
   HdsFilterBarRangeFilterSelector,
 } from './types.ts';
@@ -106,9 +106,8 @@ export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilte
   onSelectionChange(event: Event): void {
     const addFilter = (value: unknown): void => {
       const newFilter = {
-        text: value as string,
         value: value,
-      } as HdsFilterBarSelectionFilterData;
+      } as HdsFilterBarGenericFilterData;
       if (this.type === 'single-select') {
         this.internalFilters = newFilter;
       } else {
@@ -125,7 +124,7 @@ export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilte
         this.internalFilters = undefined;
       } else {
         if (Array.isArray(this.internalFilters)) {
-          const newFilter = [] as HdsFilterBarSelectionFilterData[];
+          const newFilter = [] as HdsFilterBarGenericFilterData[];
           this.internalFilters.forEach((filter) => {
             if (filter.value != value) {
               newFilter.push(filter);

packages/components/src/components/hds/filter-bar/index.hbs

@@ -10,7 +10,8 @@
     {{#if @hasSearch}}
       <Hds::Form::TextInput::Base
         @type="search"
-        @width="185px"
+        @width="320px"
+        @value={{this.searchValue}}
         class="hds-filter-bar__search"
         placeholder={{hds-t "hds.components.filter-bar.search.placeholder" default="Search"}}
         aria-label={{hds-t "hds.components.filter-bar.search.aria-label" default="Search filters"}}
@@ -50,10 +51,15 @@
               @text="{{this._filterKeyText key filter}} {{this._rangeFilterText filter.data}}"
               @onDismiss={{fn this.onFilterDismiss key}}
             />
+          {{else if (eq filter.type "search")}}
+            <Hds::Tag
+              @text="{{this._filterKeyText key filter}}: {{this._filterText filter.data}}"
+              @onDismiss={{fn this.onFilterDismiss key}}
+            />
           {{else if (eq filter.type "multi-select")}}
             {{#each (this._filterArrayData filter.data) as |item|}}
               <Hds::Tag
-                @text="{{this._filterKeyText key filter}}: {{item.text}}"
+                @text="{{this._filterKeyText key filter}}: {{item.value}}"
                 @onDismiss={{fn this.onFilterDismiss key item.value}}
               />
             {{/each}}

packages/components/src/components/hds/filter-bar/index.ts

@@ -13,7 +13,7 @@ import type {
   HdsFilterBarFilters,
   HdsFilterBarFilter,
   HdsFilterBarData,
-  HdsFilterBarSelectionFilterData,
+  HdsFilterBarGenericFilterData,
 } from './types.ts';
 import HdsDropdown from '../dropdown/index.ts';
 import HdsFilterBarFiltersDropdown from './filters-dropdown.ts';
@@ -26,7 +26,6 @@ export interface HdsFilterBarSignature {
     filters: HdsFilterBarFilters;
     hasSearch?: boolean;
     onFilter?: (filters: HdsFilterBarFilters) => void;
-    onSearch?: (event: Event) => void;
   };
   Blocks: {
     default?: [
@@ -45,6 +44,14 @@ export interface HdsFilterBarSignature {
 export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
   @tracked _isExpanded: boolean = true;
 
+  get searchValue(): string {
+    const { filters } = this.args;
+    if (filters['search']) {
+      return this._filterText(filters['search'].data);
+    }
+    return '';
+  }
+
   @action
   onFilter(filters: HdsFilterBarFilters): void {
     const { onFilter } = this.args;
@@ -63,10 +70,29 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
 
   @action
   onSearch(event: Event): void {
-    const { onSearch } = this.args;
-    if (onSearch && typeof onSearch === 'function') {
-      onSearch(event);
+    const { filters } = this.args;
+    const input = event.target as HTMLInputElement;
+    const value = input?.value;
+
+    const newFilters = {} as HdsFilterBarFilters;
+
+    Object.keys(filters).forEach((k) => {
+      newFilters[k] = JSON.parse(
+        JSON.stringify(filters[k])
+      ) as HdsFilterBarFilter;
+    });
+
+    if (value.length > 0) {
+      newFilters['search'] = {
+        type: 'search',
+        text: 'Search',
+        data: { value },
+      };
+    } else {
+      delete newFilters['search'];
     }
+
+    this.onFilter({ ...newFilters });
   }
 
   @action
@@ -90,9 +116,7 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
         ) as HdsFilterBarFilter;
       });
 
-      if (keyFilter.type === 'single-select' || keyFilter.type === 'range') {
-        delete newFilters[key];
-      } else if (isArray(keyFilter.data)) {
+      if (keyFilter.type === 'multi-select' && isArray(keyFilter.data)) {
         const newKeyfilter = keyFilter.data?.filter(
           (item) => item.value !== filterValue
         );
@@ -105,6 +129,8 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
             data: newKeyfilter,
           };
         }
+      } else {
+        delete newFilters[key];
       }
 
       this.onFilter({ ...newFilters });
@@ -113,21 +139,20 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
 
   private _filterData = (
     data: HdsFilterBarData
-  ): HdsFilterBarSelectionFilterData => {
-    if ('text' in data && 'value' in data) {
-      return { text: data.text, value: data.value };
+  ): HdsFilterBarGenericFilterData => {
+    if ('value' in data) {
+      return { value: data.value };
     }
-    return { text: '', value: '' };
+    return { value: '' };
   };
 
   private _filterText = (data: HdsFilterBarData): string => {
     const result = this._filterData(data);
-    return result?.text ?? '';
+    const resultText = result?.value as string;
+    return resultText ?? '';
   };
 
-  private _filterArrayData = (
-    data: HdsFilterBarData
-  ): { text: string; value: unknown }[] => {
+  private _filterArrayData = (data: HdsFilterBarData): { value: unknown }[] => {
     if (isArray(data)) {
       return data.map((item) => this._filterData(item));
     }

packages/components/src/components/hds/filter-bar/types.ts

@@ -8,12 +8,12 @@ export enum HdsFilterBarFilterTypeValues {
   singleSelect = 'single-select',
   range = 'range',
   generic = 'generic',
+  search = 'search',
 }
 
 export type HdsFilterBarFilterType = `${HdsFilterBarFilterTypeValues}`;
 
-export interface HdsFilterBarSelectionFilterData {
-  text: string;
+export interface HdsFilterBarGenericFilterData {
   value: unknown;
 }
 
@@ -23,20 +23,20 @@ export interface HdsFilterBarRangeFilterData {
 }
 
 export type HdsFilterBarData =
-  | HdsFilterBarSelectionFilterData[]
-  | HdsFilterBarSelectionFilterData
+  | HdsFilterBarGenericFilterData[]
+  | HdsFilterBarGenericFilterData
   | HdsFilterBarRangeFilterData;
 
 export interface HdsFilterBarSingleSelectFilter {
   type: 'single-select';
   text?: string;
-  data: HdsFilterBarSelectionFilterData;
+  data: HdsFilterBarGenericFilterData;
 }
 
 export interface HdsFilterBarMultiSelectFilter {
   type: 'multi-select';
   text?: string;
-  data: HdsFilterBarSelectionFilterData[];
+  data: HdsFilterBarGenericFilterData[];
 }
 
 export interface HdsFilterBarRangeFilter {
@@ -45,10 +45,17 @@ export interface HdsFilterBarRangeFilter {
   data: HdsFilterBarRangeFilterData;
 }
 
+export interface HdsFilterBarSearchFilter {
+  type: 'search';
+  text?: string;
+  data: HdsFilterBarGenericFilterData;
+}
+
 export type HdsFilterBarFilter =
   | HdsFilterBarSingleSelectFilter
   | HdsFilterBarMultiSelectFilter
-  | HdsFilterBarRangeFilter;
+  | HdsFilterBarRangeFilter
+  | HdsFilterBarSearchFilter;
 
 export interface HdsFilterBarFilters {
   [name: string]: HdsFilterBarFilter;

showcase/app/components/mock/app/main/generic-advanced-table.gts

@@ -26,6 +26,7 @@ import {
   type HdsFilterBarRangeFilter,
   type HdsFilterBarSingleSelectFilter,
   type HdsFilterBarMultiSelectFilter,
+  type HdsFilterBarSearchFilter,
   type HdsFilterBarFilter,
 } from '@hashicorp/design-system-components/components';
 
@@ -563,17 +564,10 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
   }
 
   onFilter = (filters: HdsFilterBarSignature['Args']['filters']) => {
+    console.log('onFilter called with filters: ', filters);
     this.filters = filters;
   };
 
-  onSearch = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    const value = target.value;
-    if (value.length > 0) {
-      window.alert(`✅ Search executed with value: ${value}`);
-    }
-  };
-
   get demoModelFilteredData() {
     const filterItem = (item: Record<string, unknown>): boolean => {
       if (Object.keys(this.filters).length === 0) return true;
@@ -589,6 +583,10 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             if (!this.isSingleSelectFilterMatch(item[key], filter)) {
               match = false;
             }
+          } else if (filter.type === 'search') {
+            if (!this.isSearchFilterMatch(item, filter)) {
+              match = false;
+            }
           } else {
             if (!this.isMultiSelectFilterMatch(item[key], filter)) {
               match = false;
@@ -650,6 +648,25 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
     return filterValues.includes(itemValue);
   }
 
+  isSearchFilterMatch(
+    item: Record<string, unknown>,
+    filter: HdsFilterBarSearchFilter,
+  ): boolean {
+    let match = false;
+    Object.keys(item).forEach((key) => {
+      const itemValue = item[key];
+      const filterValue = filter.data.value;
+      if (
+        typeof itemValue === 'string' &&
+        typeof filterValue === 'string' &&
+        itemValue.toLowerCase().includes(filterValue.toLowerCase())
+      ) {
+        match = true;
+      }
+    });
+    return match;
+  }
+
   clearFilters = () => {
     this.filters = {};
   };
@@ -676,7 +693,6 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
         @hasSearch={{true}}
         @filters={{this.filters}}
         @onFilter={{this.onFilter}}
-        @onSearch={{this.onSearch}}
         {{style marginBottom="24px"}}
         as |F|
       >
@@ -755,7 +771,6 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
             @hasSearch={{true}}
             @filters={{this.filters}}
             @onFilter={{this.onFilter}}
-            @onSearch={{this.onSearch}}
             as |F|
           >
             <F.ActionsDropdown as |D|>