Feat: Custom generic filter type

dchyun · dchyun · commit 6d4a8a4f54dd · 2025-11-24T10:58:08.000-05:00
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -239,6 +239,7 @@
       "./components/hds/filter-bar/date.js": "./dist/_app_/components/hds/filter-bar/date.js",
       "./components/hds/filter-bar/filter-group.js": "./dist/_app_/components/hds/filter-bar/filter-group.js",
       "./components/hds/filter-bar/filters-dropdown.js": "./dist/_app_/components/hds/filter-bar/filters-dropdown.js",
+      "./components/hds/filter-bar/generic.js": "./dist/_app_/components/hds/filter-bar/generic.js",
       "./components/hds/filter-bar.js": "./dist/_app_/components/hds/filter-bar.js",
       "./components/hds/filter-bar/radio.js": "./dist/_app_/components/hds/filter-bar/radio.js",
       "./components/hds/filter-bar/range.js": "./dist/_app_/components/hds/filter-bar/range.js",
diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts
@@ -136,6 +136,7 @@ export { default as HdsFilterBarCheckbox } from './components/hds/filter-bar/che
 export { default as HdsFilterBarDate } from './components/hds/filter-bar/date.ts';
 export { default as HdsFilterBarFiltersDropdown } from './components/hds/filter-bar/filters-dropdown.ts';
 export { default as HdsFilterBarFilterGroup } from './components/hds/filter-bar/filter-group.ts';
+export { default as HdsFilterBarGeneric } from './components/hds/filter-bar/generic.ts';
 export { default as HdsFilterBarRadio } from './components/hds/filter-bar/radio.ts';
 export { default as HdsFilterBarRange } from './components/hds/filter-bar/range.ts';
 export { default as HdsFilterBarTabs } from './components/hds/filter-bar/tabs/index.ts';
diff --git a/packages/components/src/components/hds/filter-bar/filter-group.hbs b/packages/components/src/components/hds/filter-bar/filter-group.hbs
@@ -26,6 +26,10 @@
       <Hds::FilterBar::Date @keyFilter={{this.keyFilter}} @onChange={{this.onDateChange}} @type="datetime" />
     {{else if (eq @type "time")}}
       <Hds::FilterBar::Date @keyFilter={{this.keyFilter}} @onChange={{this.onDateChange}} @type="time" />
+    {{else if (eq @type "generic")}}
+      {{yield
+        (hash Generic=(component "hds/filter-bar/generic" keyFilter=this.keyFilter onChange=this.onGenericChange))
+      }}
     {{else}}
       <div class="hds-filter-bar__filters-dropdown__filter-group__values-list">
         <div class="hds-filter-bar__filters-dropdown__clear">
diff --git a/packages/components/src/components/hds/filter-bar/filter-group.ts b/packages/components/src/components/hds/filter-bar/filter-group.ts
@@ -13,6 +13,7 @@ import HdsFilterBarTabsTab from './tabs/tab.ts';
 import HdsFilterBarTabsPanel from './tabs/panel.ts';
 import type { HdsTabsPanelSignature } from '../tabs/panel.ts';
 
+import HdsFilterBarGeneric from './generic.ts';
 import HdsFilterBarCheckbox from './checkbox.ts';
 import HdsFilterBarRadio from './radio.ts';
 
@@ -21,6 +22,7 @@ import type {
   HdsFilterBarFilters,
   HdsFilterBarFilterType,
   HdsFilterBarData,
+  HdsFilterBarGenericFilter,
   HdsFilterBarGenericFilterData,
   HdsFilterBarRangeFilterData,
   HdsFilterBarRangeFilterSelector,
@@ -44,6 +46,7 @@ export interface HdsFilterBarFilterGroupSignature {
   Blocks: {
     default: [
       {
+        Generic?: WithBoundArgs<typeof HdsFilterBarGeneric, 'keyFilter'>;
         Checkbox?: WithBoundArgs<
           typeof HdsFilterBarCheckbox,
           'keyFilter' | 'onChange'
@@ -205,6 +208,21 @@ export default class HdsFilterBarFilterGroup extends Component<HdsFilterBarFilte
     }
   }
 
+  @action
+  onGenericChange(filter?: HdsFilterBarGenericFilter): void {
+    if (filter) {
+      this.internalFilters = filter.data;
+      filter.text = this.args.text;
+    } else {
+      this.internalFilters = undefined;
+    }
+
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, filter);
+    }
+  }
+
   @action
   onClear(): void {
     this.internalFilters = undefined;
diff --git a/packages/components/src/components/hds/filter-bar/generic.hbs b/packages/components/src/components/hds/filter-bar/generic.hbs
@@ -0,0 +1,18 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<div class="hds-filter-bar__filters-dropdown__filter-generic">
+  <Hds::Layout::Flex class="hds-filter-bar__filters-dropdown__fields" @direction="column" @gap="16">
+    {{yield (hash updateFilter=this.updateFilter)}}
+  </Hds::Layout::Flex>
+  <div class="hds-filter-bar__filters-dropdown__clear">
+    <Hds::Button
+      @text={{hds-t "hds.components.filter-bar.date.clear" default="Clear filter"}}
+      @color="tertiary"
+      @icon="rotate-ccw"
+      @isInline={{true}}
+      {{on "click" this.onClear}}
+    />
+  </div>
+</div>
diff --git a/packages/components/src/components/hds/filter-bar/generic.ts b/packages/components/src/components/hds/filter-bar/generic.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+import type { HdsFilterBarFilter, HdsFilterBarGenericFilter } from './types.ts';
+
+export interface HdsFilterBarGenericSignature {
+  Args: {
+    keyFilter: HdsFilterBarFilter | undefined;
+    onChange?: (filter?: HdsFilterBarGenericFilter) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        updateFilter: (filter: HdsFilterBarGenericFilter) => void;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsFilterBarGeneric extends Component<HdsFilterBarGenericSignature> {
+  @action
+  updateFilter(filter: HdsFilterBarGenericFilter): void {
+    console.log('Update filter action triggered', filter);
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(filter);
+    }
+  }
+
+  @action
+  onClear(): void {
+    console.log('Clear action triggered');
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange();
+    }
+  }
+}
diff --git a/packages/components/src/components/hds/filter-bar/index.hbs b/packages/components/src/components/hds/filter-bar/index.hbs
@@ -45,7 +45,7 @@
       {{#if this.hasActiveFilters}}
         {{#each-in @filters as |key filter|}}
           {{#if filter.data}}
-            {{#if (and (eq filter.type "single-select"))}}
+            {{#if (eq filter.type "single-select")}}
               <Hds::Tag
                 @text="{{this._filterKeyText key filter}}: {{this._filterText filter}}"
                 @onDismiss={{fn this.onFilterDismiss key}}
@@ -65,6 +65,11 @@
                 @text="{{this._filterKeyText key filter}}: {{this._filterText filter}}"
                 @onDismiss={{fn this.onFilterDismiss key}}
               />
+            {{else if (eq filter.type "generic")}}
+              <Hds::Tag
+                @text="{{this._filterKeyText key filter}} {{this._genericFilterText filter}}"
+                @onDismiss={{fn this.onFilterDismiss key}}
+              />
             {{else if (eq filter.type "multi-select")}}
               {{#each (this._filterArrayData filter.data) as |item|}}
                 <Hds::Tag
diff --git a/packages/components/src/components/hds/filter-bar/index.ts b/packages/components/src/components/hds/filter-bar/index.ts
@@ -276,4 +276,12 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
     const newDate = new Intl.DateTimeFormat(undefined, options);
     return newDate.format(date);
   };
+
+  private _genericFilterText = (filter: HdsFilterBarFilter): string => {
+    if ('dismissTagText' in filter) {
+      return filter.dismissTagText ?? '';
+    } else {
+      return '';
+    }
+  };
 }
diff --git a/packages/components/src/components/hds/filter-bar/radio.ts b/packages/components/src/components/hds/filter-bar/radio.ts
@@ -31,7 +31,12 @@ export default class HdsFilterBarRadio extends Component<HdsFilterBarRadioSignat
 
   get isChecked(): boolean {
     const { keyFilter, value } = this.args;
-    if (keyFilter && value && 'value' in keyFilter.data) {
+    if (
+      keyFilter &&
+      keyFilter.type === 'single-select' &&
+      value &&
+      'value' in keyFilter.data
+    ) {
       return keyFilter.data.value === value;
     }
     return false;
diff --git a/packages/components/src/components/hds/filter-bar/types.ts b/packages/components/src/components/hds/filter-bar/types.ts
@@ -36,6 +36,12 @@ export type HdsFilterBarData =
   | HdsFilterBarRangeFilterData
   | HdsFilterBarDateFilterData;
 
+export interface HdsFilterBarGenericFilter {
+  type: 'generic';
+  text?: string;
+  dismissTagText?: string;
+  data: HdsFilterBarGenericFilterData | HdsFilterBarGenericFilterData[];
+}
 export interface HdsFilterBarSingleSelectFilter {
   type: 'single-select';
   text?: string;
@@ -71,7 +77,8 @@ export type HdsFilterBarFilter =
   | HdsFilterBarMultiSelectFilter
   | HdsFilterBarRangeFilter
   | HdsFilterBarDateFilter
-  | HdsFilterBarSearchFilter;
+  | HdsFilterBarSearchFilter
+  | HdsFilterBarGenericFilter;
 
 export interface HdsFilterBarFilters {
   [name: string]: HdsFilterBarFilter;
diff --git a/packages/components/src/styles/components/filter-bar.scss b/packages/components/src/styles/components/filter-bar.scss
@@ -58,14 +58,10 @@
 }
 
 .hds-filter-bar__filters-dropdown__filter-group__search {
-  padding: 16px;
+  padding: 0 16px 16px 16px;
   border-bottom: 1px solid var(--token-color-border-primary);
 }
 
-.hds-filter-bar__filters-dropdown__filter-group__values-list {
-  padding: 8px 0;
-}
-
 .hds-filter-bar__filters-dropdown__filter-group__list {
   display: flex;
   flex-direction: column;
@@ -95,7 +91,6 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 16px 0;
 }
 
 .hds-filter-bar__filters-dropdown__fields {
@@ -136,6 +131,7 @@
   flex-direction: column;
   gap: 8px;
   width: 50%;
+  padding: 16px 0;
   background-color: var(--token-color-surface-primary);
   border-top-right-radius: var(--token-border-radius-medium);
 }
diff --git a/packages/components/src/template-registry.ts b/packages/components/src/template-registry.ts
@@ -101,6 +101,7 @@ import type HdsDropdownToggleIconComponent from './components/hds/dropdown/toggl
 import type HdsFilterBarComponent from './components/hds/filter-bar';
 import type HdsFilterBarCheckboxComponent from './components/hds/filter-bar/checkbox';
 import type HdsFilterBarDateComponent from './components/hds/filter-bar/date';
+import type HdsFilterBarGenericComponent from './components/hds/filter-bar/generic';
 import type HdsFilterBarRadioComponent from './components/hds/filter-bar/radio';
 import type HdsFilterBarFiltersDropdownComponent from './components/hds/filter-bar/filters-dropdown';
 import type HdsFilterBarFilterGroupComponent from './components/hds/filter-bar/filter-group';
@@ -572,6 +573,8 @@ export default interface HdsComponentsRegistry {
   'hds/filter-bar/checkbox': typeof HdsFilterBarCheckboxComponent;
   'Hds::FilterBar::Date': typeof HdsFilterBarDateComponent;
   'hds/filter-bar/date': typeof HdsFilterBarDateComponent;
+  'Hds::FilterBar::Generic': typeof HdsFilterBarGenericComponent;
+  'hds/filter-bar/generic': typeof HdsFilterBarGenericComponent;
   'Hds::FilterBar::Radio': typeof HdsFilterBarRadioComponent;
   'hds/filter-bar/radio': typeof HdsFilterBarRadioComponent;
   'Hds::FilterBar::FiltersDropdown': typeof HdsFilterBarFiltersDropdownComponent;
diff --git a/showcase/app/components/mock/app/main/generic-advanced-table.gts b/showcase/app/components/mock/app/main/generic-advanced-table.gts
@@ -6,7 +6,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { deepTracked } from 'ember-deep-tracked';
-import { get } from '@ember/helper';
+import { get, fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import style from 'ember-style-modifier/modifiers/style';
 
@@ -31,6 +31,7 @@ import {
   type HdsFilterBarMultiSelectFilter,
   type HdsFilterBarSearchFilter,
   type HdsFilterBarFilter,
+  type HdsFilterBarGenericFilter,
 } from '@hashicorp/design-system-components/components';
 
 import type { HdsAdvancedTableSignature } from '@hashicorp/design-system-components/components/hds/advanced-table/index';
@@ -535,6 +536,14 @@ const SAMPLE_COLUMNS = [
   },
 ];
 
+const CUSTOM_FILTER = {
+  type: 'generic',
+  dismissTagText: 'equals example/a))!hzfpKcBl0',
+  data: {
+    value: 'example/a))!hzfpKcBl0',
+  },
+} as HdsFilterBarGenericFilter;
+
 const updateModelWithSelectAllState = (
   modelData: HdsAdvancedTableSignature['Args']['model'],
   selectAllState: boolean,
@@ -623,6 +632,11 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
                 match = false;
               }
               break;
+            case 'generic':
+              if (!this.isGenericFilterMatch(item[key], filter)) {
+                match = false;
+              }
+              break;
             default:
               if (!this.isMultiSelectFilterMatch(item[key], filter)) {
                 match = false;
@@ -756,6 +770,18 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
     return match;
   }
 
+  isGenericFilterMatch(
+    itemValue: unknown,
+    filter: HdsFilterBarGenericFilter,
+  ): boolean {
+    if (Array.isArray(filter.data)) {
+      const filterValues = filter.data.map((d) => d.value);
+      return filterValues.includes(itemValue);
+    } else {
+      return itemValue === filter.data.value;
+    }
+  }
+
   dateFromFilter = (dateString: string, filterType: string): Date => {
     if (filterType === 'time') {
       return new Date(`1970-01-01T${dateString}`);
@@ -986,6 +1012,22 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
                 @type="range"
               />
               <D.FilterGroup @key="created" @text="Created" @type="date" />
+              <D.FilterGroup
+                @key="vcs-repo"
+                @text="VCS repo"
+                @type="generic"
+                as |F|
+              >
+                <F.Generic as |G|>
+                  <ShwPlaceholder @text="generic content" @height="100" />
+                  <HdsButton
+                    @text="Add custom filter"
+                    @color="secondary"
+                    @size="small"
+                    {{on "click" (fn G.updateFilter CUSTOM_FILTER)}}
+                  />
+                </F.Generic>
+              </D.FilterGroup>
             </F.FiltersDropdown>
           </A.FilterBar>
         {{/unless}}
