Skip to content

Commit eabf73a

Browse files
dchyundchyun
committed
Fix: Type and linting errors
1 parent 07a9b20 commit eabf73a

File tree

20 files changed

+217
-88
lines changed

20 files changed

+217
-88
lines changed

‎packages/components/src/components/hds/advanced-table/index.hbs‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,9 +219,15 @@
219219
{{yield to="emptyState"}}
220220
{{else}}
221221
<Hds::Layout::Flex @direction="column" @gap="8">
222-
<Hds::Text::Display @tag="h3" @size="300">No data to display</Hds::Text::Display>
222+
<Hds::Text::Display @tag="h3" @size="300">{{hds-t
223+
"hds.components.advanced-table.empty-state.title"
224+
default="No data available"
225+
}}</Hds::Text::Display>
223226
<Hds::Text::Body>
224-
No data is available in the table to display.
227+
{{hds-t
228+
"hds.components.advanced-table.empty-state.description"
229+
default="There is currently no data to display in the table."
230+
}}
225231
</Hds::Text::Body>
226232
</Hds::Layout::Flex>
227233
{{/if}}

‎packages/components/src/components/hds/filter-bar/checkbox.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@
66
import Component from '@glimmer/component';
77
import { action } from '@ember/object';
88

9-
import type { HdsFilterBarSelectionFilter } from './types.ts';
10-
import type { HdsDropdownSignature } from '../dropdown/index.ts';
9+
import type { HdsFilterBarData } from './types.ts';
1110

1211
export interface HdsFilterBarCheckboxSignature {
13-
Args: HdsDropdownSignature['Args'] & {
12+
Args: {
1413
value?: string;
15-
keyFilter: HdsFilterBarSelectionFilter[] | undefined;
14+
keyFilter: HdsFilterBarData | undefined;
1615
onChange?: (event: Event) => void;
1716
};
1817
Blocks: {

‎packages/components/src/components/hds/filter-bar/filter-options.hbs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
{{! @glint-nocheck }}
1+
{{!
2+
Copyright (c) HashiCorp, Inc.
3+
SPDX-License-Identifier: MPL-2.0
4+
}}
25
{{#let @panel as |Panel|}}
36
<Panel class="hds-filter-bar__filters-dropdown__filter-options" {{this._setUpFilterOptions}}>
47
{{#if @searchEnabled}}
58
<div class="hds-filter-bar__filters-dropdown__filter-options__search">
69
<Hds::Form::TextInput::Base
710
@type="search"
8-
placeholder={{if @searchPlaceholder @searchPlaceholder "Search"}}
11+
placeholder={{hds-t "components.filter-bar.filter-options.search-input-placeholder" default="Search"}}
912
{{on "input" this.onSearch}}
1013
/>
1114
</div>

‎packages/components/src/components/hds/filter-bar/filter-options.ts‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { modifier } from 'ember-modifier';
1010
import type { WithBoundArgs } from '@glint/template';
1111

1212
import HdsTabsPanel from '../tabs/panel.ts';
13+
import type { HdsTabsPanelSignature } from '../tabs/panel.ts';
1314

1415
import HdsFilterBarCheckbox from './checkbox.ts';
1516
import HdsFilterBarRadio from './radio.ts';
@@ -19,8 +20,8 @@ import type {
1920
HdsFilterBarFilters,
2021
HdsFilterBarFilterType,
2122
HdsFilterBarData,
22-
HdsFilterBarSelectionFilter,
23-
HdsFilterBarRangeFilter,
23+
HdsFilterBarSelectionFilterData,
24+
HdsFilterBarRangeFilterData,
2425
HdsFilterBarRangeFilterSelector,
2526
} from './types.ts';
2627

@@ -47,23 +48,25 @@ export interface HdsFilterBarFilterOptionsSignature {
4748
},
4849
];
4950
};
50-
Element: HTMLDivElement;
51+
Element: HdsTabsPanelSignature['Element'];
5152
}
5253

5354
export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFilterOptionsSignature> {
5455
@tracked internalFilters: HdsFilterBarData | undefined = [];
5556

56-
private _element!: HTMLDivElement;
57+
private _element!: HdsTabsPanelSignature['Element'];
5758

58-
private _setUpFilterOptions = modifier((element: HTMLDivElement) => {
59-
this._element = element;
59+
private _setUpFilterOptions = modifier(
60+
(element: HdsTabsPanelSignature['Element']) => {
61+
this._element = element;
6062

61-
if (this.keyFilter) {
62-
this.internalFilters = JSON.parse(
63-
JSON.stringify(this.keyFilter)
64-
) as HdsFilterBarData;
63+
if (this.keyFilter) {
64+
this.internalFilters = JSON.parse(
65+
JSON.stringify(this.keyFilter)
66+
) as HdsFilterBarData;
67+
}
6568
}
66-
});
69+
);
6770

6871
get type(): HdsFilterBarFilterType {
6972
const { type } = this.args;
@@ -89,7 +92,7 @@ export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFil
8992
const newFilter = {
9093
text: value as string,
9194
value: value,
92-
} as HdsFilterBarSelectionFilter;
95+
} as HdsFilterBarSelectionFilterData;
9396
if (this.type === 'single-select') {
9497
this.internalFilters = newFilter;
9598
} else {
@@ -106,7 +109,7 @@ export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFil
106109
this.internalFilters = undefined;
107110
} else {
108111
if (Array.isArray(this.internalFilters)) {
109-
const newFilter = [] as HdsFilterBarSelectionFilter[];
112+
const newFilter = [] as HdsFilterBarSelectionFilterData[];
110113
this.internalFilters.forEach((filter) => {
111114
if (filter.value != value) {
112115
newFilter.push(filter);
@@ -142,7 +145,7 @@ export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFil
142145
const newFilter = {
143146
selector: selector,
144147
value: value,
145-
} as HdsFilterBarRangeFilter;
148+
} as HdsFilterBarRangeFilterData;
146149
return newFilter;
147150
};
148151

@@ -189,9 +192,13 @@ export default class HdsFilterBarFilterOptions extends Component<HdsFilterBarFil
189192
const text = item.textContent.toLowerCase();
190193
const searchText = input.value.toLowerCase();
191194
if (text.includes(searchText)) {
192-
item.style.display = '';
195+
item.classList.remove(
196+
'hds-filter-bar__filters-dropdown__filter-option--hidden'
197+
);
193198
} else {
194-
item.style.display = 'none';
199+
item.classList.add(
200+
'hds-filter-bar__filters-dropdown__filter-option--hidden'
201+
);
195202
}
196203
}
197204
});

‎packages/components/src/components/hds/filter-bar/filters-dropdown.hbs‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
{{! @glint-nocheck }}
1+
{{!
2+
Copyright (c) HashiCorp, Inc.
3+
SPDX-License-Identifier: MPL-2.0
4+
}}
25
<Hds::Dropdown
36
@listPosition="bottom-left"
47
@height="500px"
@@ -17,23 +20,31 @@
1720
FilterOptions=(component
1821
"hds/filter-bar/filter-options" panel=T.Panel onChange=this.onFilter filters=this.internalFilters
1922
)
23+
close=D.close
2024
)
2125
}}
2226
</Hds::Tabs>
2327
</D.Generic>
2428
<D.Footer @hasDivider={{true}}>
2529
<Hds::Layout::Flex @direction="row" @justify="space-between" @align="center" as |LF|>
2630
<Hds::ButtonSet>
27-
<Hds::Button @text="Apply filters" @size="small" {{on "click" (fn this.onApply D.close)}} />
2831
<Hds::Button
29-
@text="Clear all filters"
32+
@text={{hds-t "hds.components.filter-bar.filters-dropdown.apply" default="Apply filters"}}
33+
@size="small"
34+
{{on "click" (fn this.onApply D.close)}}
35+
/>
36+
<Hds::Button
37+
@text={{hds-t "hds.components.filter-bar.filters-dropdown.clear" default="Clear all filters"}}
3038
@color="secondary"
3139
@size="small"
3240
{{on "click" (fn this.onClear D.close)}}
3341
/>
3442
</Hds::ButtonSet>
3543
<LF.Item>
36-
<Hds::Text::Body>Filters selected:</Hds::Text::Body>
44+
<Hds::Text::Body>{{hds-t
45+
"hds.components.filter-bar.filters-dropdown.selected-filters"
46+
default="Filters selected"
47+
}}:</Hds::Text::Body>
3748
<Hds::BadgeCount @text={{this.numFilters}} @type="outlined" />
3849
</LF.Item>
3950
</Hds::Layout::Flex>

‎packages/components/src/components/hds/filter-bar/filters-dropdown.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { modifier } from 'ember-modifier';
1010
import type Owner from '@ember/owner';
1111
import type { WithBoundArgs } from '@glint/template';
1212

13-
import HdsDropdown from './../dropdown/index.ts';
1413
import HdsFilterBarFilterTab from './filter-tab.ts';
1514
import HdsFilterBarFilterOptions from './filter-options.ts';
1615
import type { HdsFilterBarFilters, HdsFilterBarFilter } from './types.ts';
@@ -19,14 +18,16 @@ import type { HdsDropdownSignature } from '../dropdown/index.ts';
1918

2019
export interface HdsFilterBarFiltersDropdownSignature {
2120
Args: HdsDropdownSignature['Args'] & {
22-
dropdown?: WithBoundArgs<typeof HdsDropdown, never>;
2321
filters: HdsFilterBarFilters;
2422
onFilter?: (filters: HdsFilterBarFilters) => void;
2523
};
2624
Blocks: {
2725
default: [
2826
{
29-
Filter?: WithBoundArgs<typeof HdsFilterBarFilterTab, 'tab' | 'filters'>;
27+
FilterTab?: WithBoundArgs<
28+
typeof HdsFilterBarFilterTab,
29+
'tab' | 'filters'
30+
>;
3031
FilterOptions?: WithBoundArgs<
3132
typeof HdsFilterBarFilterOptions,
3233
'panel' | 'onChange' | 'filters'

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
{{! @glint-nocheck }}
1+
{{!
2+
Copyright (c) HashiCorp, Inc.
3+
SPDX-License-Identifier: MPL-2.0
4+
}}
25
<div class="hds-filter-bar" ...attributes>
36
<div class="hds-filter-bar__actions">
47
{{yield
@@ -9,8 +12,8 @@
912
@type="search"
1013
@width="185px"
1114
class="hds-filter-bar__search"
12-
placeholder="Search across"
13-
aria-label="Search table"
15+
placeholder={{hds-t "hds.components.filter-bar.search.placeholder" default="Search"}}
16+
aria-label={{hds-t "hds.components.filter-bar.search.aria-label" default="Search filters"}}
1417
name="search"
1518
{{on "change" this.onSearch}}
1619
/>
@@ -23,13 +26,15 @@
2326
<div class="hds-filter-bar__filters">
2427
{{#each-in @filters as |key filter|}}
2528
{{#if filter.data}}
26-
{{#if (eq filter.type "single-select")}}
29+
{{#if (and (eq filter.type "single-select"))}}
2730
<Hds::Tag
28-
@text="{{key}}: {{filter.data.text}}"
29-
@onDismiss={{fn this.onFilterDismiss key filter.data.value}}
31+
@text="{{key}}: {{this._filterText filter.data}}"
32+
@onDismiss={{fn this.onFilterDismiss key (this._filterValue filter.data)}}
3033
/>
34+
{{else if (eq filter.type "range")}}
35+
<Hds::Tag @text="{{key}}: to do" />
3136
{{else if (eq filter.type "multi-select")}}
32-
{{#each filter.data as |item|}}
37+
{{#each (this._filterArrayData filter.data) as |item|}}
3338
<Hds::Tag @text="{{key}}: {{item.text}}" @onDismiss={{fn this.onFilterDismiss key item.value}} />
3439
{{/each}}
3540
{{/if}}

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

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import { action } from '@ember/object';
88

99
import type { ComponentLike, WithBoundArgs } from '@glint/template';
1010

11-
import type { HdsFilterBarFilters, HdsFilterBarFilter } from './types.ts';
11+
import type {
12+
HdsFilterBarFilters,
13+
HdsFilterBarFilter,
14+
HdsFilterBarData,
15+
HdsFilterBarSelectionFilterData,
16+
} from './types.ts';
1217
import HdsDropdown from '../dropdown/index.ts';
1318
import HdsFilterBarFiltersDropdown from './filters-dropdown.ts';
1419
import { isArray } from '@ember/array';
@@ -26,7 +31,7 @@ export interface HdsFilterBarSignature {
2631
ActionsDropdown?: ComponentLike<typeof HdsDropdown>;
2732
FiltersDropdown?: WithBoundArgs<
2833
typeof HdsFilterBarFiltersDropdown,
29-
never
34+
'filters' | 'onFilter'
3035
>;
3136
},
3237
];
@@ -94,4 +99,32 @@ export default class HdsFilterBar extends Component<HdsFilterBarSignature> {
9499
this.onFilter({ ...newFilters });
95100
}
96101
};
102+
103+
private _filterData = (
104+
data: HdsFilterBarData
105+
): HdsFilterBarSelectionFilterData => {
106+
if ('text' in data && 'value' in data) {
107+
return { text: data.text, value: data.value };
108+
}
109+
return { text: '', value: '' };
110+
};
111+
112+
private _filterText = (data: HdsFilterBarData): string => {
113+
const result = this._filterData(data);
114+
return result?.text ?? '';
115+
};
116+
117+
private _filterValue = (data: HdsFilterBarData): unknown => {
118+
const result = this._filterData(data);
119+
return result?.value;
120+
};
121+
122+
private _filterArrayData = (
123+
data: HdsFilterBarData
124+
): { text: string; value: unknown }[] => {
125+
if (isArray(data)) {
126+
return data.map((item) => this._filterData(item));
127+
}
128+
return [];
129+
};
97130
}

‎packages/components/src/components/hds/filter-bar/radio.hbs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
{{!
2+
Copyright (c) HashiCorp, Inc.
3+
SPDX-License-Identifier: MPL-2.0
4+
}}
15
<li class="hds-filter-bar__filters-dropdown__filter-option">
26
<Hds::Form::Radio::Field checked={{this.isChecked}} @value={{@value}} {{on "change" this.onChange}} as |F|>
37
<F.Label>{{yield}}</F.Label>

‎packages/components/src/components/hds/filter-bar/radio.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@
66
import Component from '@glimmer/component';
77
import { action } from '@ember/object';
88

9-
import type { HdsFilterBarSelectionFilter } from './types.ts';
10-
import type { HdsDropdownSignature } from '../dropdown/index.ts';
9+
import type { HdsFilterBarData } from './types.ts';
1110

1211
export interface HdsFilterBarRadioSignature {
13-
Args: HdsDropdownSignature['Args'] & {
12+
Args: {
1413
value?: string;
15-
keyFilter: HdsFilterBarSelectionFilter | undefined;
14+
keyFilter: HdsFilterBarData | undefined;
1615
onChange?: (event: Event) => void;
1716
};
1817
Blocks: {
@@ -32,7 +31,7 @@ export default class HdsFilterBarRadio extends Component<HdsFilterBarRadioSignat
3231

3332
get isChecked(): boolean {
3433
const { keyFilter, value } = this.args;
35-
if (keyFilter && value) {
34+
if (keyFilter && value && 'value' in keyFilter) {
3635
return keyFilter.value === value;
3736
}
3837
return false;

0 commit comments

Comments
 (0)