Skip to content

Commit f75fcd7

Browse files
cdcabreracdcabrera
committedMar 31, 2025
refactor(select): sw-3339 expand deprecated pf replacement (#1562)
* toolbarFields, replace for group, billing, export, granularity, category
1 parent 3418a6e commit f75fcd7

22 files changed

+203
-171
lines changed
 

Diff for: ‎src/components/README.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -6482,13 +6482,13 @@ A standalone Billing Provider select filter.
64826482

64836483

64846484
* [ToolbarFieldBillingProvider](#Toolbar.module_ToolbarFieldBillingProvider)
6485-
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldBillingProvider..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
6485+
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldBillingProvider..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
64866486
* [~useOnSelect(options)](#Toolbar.module_ToolbarFieldBillingProvider..useOnSelect) ⇒ <code>function</code>
64876487
* [~ToolbarFieldBillingProvider(props)](#Toolbar.module_ToolbarFieldBillingProvider..ToolbarFieldBillingProvider) ⇒ <code>JSX.Element</code>
64886488

64896489
<a name="Toolbar.module_ToolbarFieldBillingProvider..toolbarFieldOptions"></a>
64906490

6491-
### ToolbarFieldBillingProvider~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
6491+
### ToolbarFieldBillingProvider~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
64926492
Select field options.
64936493

64946494
**Kind**: inner constant of [<code>ToolbarFieldBillingProvider</code>](#Toolbar.module_ToolbarFieldBillingProvider)
@@ -6724,13 +6724,13 @@ A standalone export select/dropdown filter and download hooks.
67246724

67256725

67266726
* [ToolbarFieldExport](#Toolbar.module_ToolbarFieldExport)
6727-
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldExport..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
6727+
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldExport..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
67286728
* [~useOnSelect(options)](#Toolbar.module_ToolbarFieldExport..useOnSelect) ⇒ <code>function</code>
67296729
* [~ToolbarFieldExport(props)](#Toolbar.module_ToolbarFieldExport..ToolbarFieldExport) ⇒ <code>JSX.Element</code>
67306730

67316731
<a name="Toolbar.module_ToolbarFieldExport..toolbarFieldOptions"></a>
67326732

6733-
### ToolbarFieldExport~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
6733+
### ToolbarFieldExport~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
67346734
Select field options.
67356735

67366736
**Kind**: inner constant of [<code>ToolbarFieldExport</code>](#Toolbar.module_ToolbarFieldExport)
@@ -6949,13 +6949,13 @@ A standalone Granularity select filter.
69496949

69506950

69516951
* [ToolbarFieldGranularity](#Toolbar.module_ToolbarFieldGranularity)
6952-
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldGranularity..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
6952+
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldGranularity..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
69536953
* [~useOnSelect(options)](#Toolbar.module_ToolbarFieldGranularity..useOnSelect) ⇒ <code>function</code>
69546954
* [~ToolbarFieldGranularity(props)](#Toolbar.module_ToolbarFieldGranularity..ToolbarFieldGranularity) ⇒ <code>JSX.Element</code>
69556955

69566956
<a name="Toolbar.module_ToolbarFieldGranularity..toolbarFieldOptions"></a>
69576957

6958-
### ToolbarFieldGranularity~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
6958+
### ToolbarFieldGranularity~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
69596959
Select field options.
69606960

69616961
**Kind**: inner constant of [<code>ToolbarFieldGranularity</code>](#Toolbar.module_ToolbarFieldGranularity)
@@ -7109,13 +7109,13 @@ A standalone Ranged Monthly Granularity select filter.
71097109

71107110

71117111
* [ToolbarFieldRangedMonthly](#Toolbar.module_ToolbarFieldRangedMonthly)
7112-
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldRangedMonthly..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
7112+
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldRangedMonthly..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
71137113
* [~useOnSelect(options)](#Toolbar.module_ToolbarFieldRangedMonthly..useOnSelect) ⇒ <code>function</code>
71147114
* [~ToolbarFieldRangedMonthly(props)](#Toolbar.module_ToolbarFieldRangedMonthly..ToolbarFieldRangedMonthly) ⇒ <code>JSX.Element</code>
71157115

71167116
<a name="Toolbar.module_ToolbarFieldRangedMonthly..toolbarFieldOptions"></a>
71177117

7118-
### ToolbarFieldRangedMonthly~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
7118+
### ToolbarFieldRangedMonthly~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
71197119
Select field options.
71207120

71217121
**Kind**: inner constant of [<code>ToolbarFieldRangedMonthly</code>](#Toolbar.module_ToolbarFieldRangedMonthly)
@@ -7177,14 +7177,14 @@ Display a granularity field with options.
71777177
## ToolbarFieldSelectCategory
71787178

71797179
* [ToolbarFieldSelectCategory](#Toolbar.module_ToolbarFieldSelectCategory)
7180-
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldSelectCategory..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
7180+
* [~toolbarFieldOptions](#Toolbar.module_ToolbarFieldSelectCategory..toolbarFieldOptions) : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
71817181
* [~useOnSelect(options)](#Toolbar.module_ToolbarFieldSelectCategory..useOnSelect) ⇒ <code>function</code>
71827182
* [~useSelectCategoryOptions(options)](#Toolbar.module_ToolbarFieldSelectCategory..useSelectCategoryOptions) ⇒ <code>Object</code>
71837183
* [~ToolbarFieldSelectCategory(props)](#Toolbar.module_ToolbarFieldSelectCategory..ToolbarFieldSelectCategory) ⇒ <code>JSX.Element</code>
71847184

71857185
<a name="Toolbar.module_ToolbarFieldSelectCategory..toolbarFieldOptions"></a>
71867186

7187-
### ToolbarFieldSelectCategory~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, selected: boolean}&gt;</code>
7187+
### ToolbarFieldSelectCategory~toolbarFieldOptions : <code>Array.&lt;{title: React.ReactNode, value: string, isSelected: boolean}&gt;</code>
71887188
Select field options. Use function instead of arrow func to help with component
71897189
display name during testing.
71907190

Diff for: ‎src/components/toolbar/__tests__/__snapshots__/toolbarFieldBillingProvider.test.js.snap

+11-7
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
exports[`ToolbarFieldBillingProvider Component should export select options: toolbarFieldOptions 1`] = `
44
[
55
{
6-
"selected": false,
6+
"isSelected": false,
77
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"red hat"})",
88
"value": "red hat",
99
},
1010
{
11-
"selected": false,
11+
"isSelected": false,
1212
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"aws"})",
1313
"value": "aws",
1414
},
1515
{
16-
"selected": false,
16+
"isSelected": false,
1717
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"azure"})",
1818
"value": "azure",
1919
},
@@ -60,30 +60,34 @@ exports[`ToolbarFieldBillingProvider Component should handle updating sla throug
6060

6161
exports[`ToolbarFieldBillingProvider Component should render a basic component: basic 1`] = `
6262
<Select
63+
alignment={
64+
{
65+
"position": "left",
66+
}
67+
}
6368
aria-label="t(curiosity-toolbar.placeholder_billing, {"context":"provider"})"
6469
data-test="toolbarFieldBillingProvider"
6570
onSelect={[Function]}
6671
options={
6772
[
6873
{
69-
"selected": false,
74+
"isSelected": false,
7075
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"red hat"})",
7176
"value": "red hat",
7277
},
7378
{
74-
"selected": true,
79+
"isSelected": true,
7580
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"aws"})",
7681
"value": "aws",
7782
},
7883
{
79-
"selected": false,
84+
"isSelected": false,
8085
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"azure"})",
8186
"value": "azure",
8287
},
8388
]
8489
}
8590
placeholder="t(curiosity-toolbar.placeholder_billing, {"context":"provider"})"
86-
position="left"
8791
selectedOptions="aws"
8892
/>
8993
`;

Diff for: ‎src/components/toolbar/__tests__/__snapshots__/toolbarFieldExport.test.js.snap

+16-8
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
exports[`ToolbarFieldExport Component should export select options: toolbarFieldOptions 1`] = `
44
[
55
{
6-
"selected": false,
6+
"isSelected": false,
77
"title": "t(curiosity-toolbar.label_export, {"context":"csv"})",
88
"value": "csv",
99
},
1010
{
11-
"selected": false,
11+
"isSelected": false,
1212
"title": "t(curiosity-toolbar.label_export, {"context":"json"})",
1313
"value": "json",
1414
},
@@ -42,30 +42,38 @@ exports[`ToolbarFieldExport Component should handle updating export through redu
4242

4343
exports[`ToolbarFieldExport Component should render a basic component: basic 1`] = `
4444
<Select
45+
alignment={
46+
{
47+
"position": "left",
48+
}
49+
}
4550
aria-label="t(curiosity-toolbar.placeholder, {"context":"export"})"
46-
buttonContent="t(curiosity-toolbar.label, {"context":"export"})"
47-
buttonVariant="secondary"
4851
data-test="toolbarFieldExport"
49-
isDropdownButton={true}
5052
onSelect={[Function]}
5153
options={
5254
[
5355
{
5456
"isDisabled": false,
55-
"selected": false,
57+
"isSelected": false,
5658
"title": "t(curiosity-toolbar.label_export, {"context":"csv"})",
5759
"value": "csv",
5860
},
5961
{
6062
"isDisabled": false,
61-
"selected": false,
63+
"isSelected": false,
6264
"title": "t(curiosity-toolbar.label_export, {"context":"json"})",
6365
"value": "json",
6466
},
6567
]
6668
}
6769
placeholder="t(curiosity-toolbar.placeholder, {"context":"export"})"
68-
position="left"
6970
title="t(curiosity-toolbar.placeholder, {"context":"export"})"
71+
toggle={
72+
{
73+
"content": "t(curiosity-toolbar.label, {"context":"export"})",
74+
"variant": "secondary",
75+
}
76+
}
77+
variant="dropdown"
7078
/>
7179
`;

Diff for: ‎src/components/toolbar/__tests__/__snapshots__/toolbarFieldGranularity.test.js.snap

+13-9
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@
33
exports[`ToolbarFieldGranularity Component should export select options: toolbarFieldOptions 1`] = `
44
[
55
{
6-
"selected": false,
6+
"isSelected": false,
77
"title": "t(curiosity-toolbar.label_granularity, {"context":"Daily"})",
88
"value": "Daily",
99
},
1010
{
11-
"selected": false,
11+
"isSelected": false,
1212
"title": "t(curiosity-toolbar.label_granularity, {"context":"Weekly"})",
1313
"value": "Weekly",
1414
},
1515
{
16-
"selected": false,
16+
"isSelected": false,
1717
"title": "t(curiosity-toolbar.label_granularity, {"context":"Monthly"})",
1818
"value": "Monthly",
1919
},
2020
{
21-
"selected": false,
21+
"isSelected": false,
2222
"title": "t(curiosity-toolbar.label_granularity, {"context":"Quarterly"})",
2323
"value": "Quarterly",
2424
},
@@ -89,35 +89,39 @@ exports[`ToolbarFieldGranularity Component should handle updating granularity th
8989

9090
exports[`ToolbarFieldGranularity Component should render a basic component: basic 1`] = `
9191
<Select
92+
alignment={
93+
{
94+
"position": "left",
95+
}
96+
}
9297
aria-label="t(curiosity-toolbar.placeholder, {"context":"granularity"})"
9398
data-test="toolbarFieldGranularity"
9499
onSelect={[Function]}
95100
options={
96101
[
97102
{
98-
"selected": false,
103+
"isSelected": false,
99104
"title": "t(curiosity-toolbar.label_granularity, {"context":"Daily"})",
100105
"value": "Daily",
101106
},
102107
{
103-
"selected": true,
108+
"isSelected": true,
104109
"title": "t(curiosity-toolbar.label_granularity, {"context":"Weekly"})",
105110
"value": "Weekly",
106111
},
107112
{
108-
"selected": false,
113+
"isSelected": false,
109114
"title": "t(curiosity-toolbar.label_granularity, {"context":"Monthly"})",
110115
"value": "Monthly",
111116
},
112117
{
113-
"selected": false,
118+
"isSelected": false,
114119
"title": "t(curiosity-toolbar.label_granularity, {"context":"Quarterly"})",
115120
"value": "Quarterly",
116121
},
117122
]
118123
}
119124
placeholder="t(curiosity-toolbar.placeholder, {"context":"granularity"})"
120-
position="left"
121125
selectedOptions="Weekly"
122126
/>
123127
`;

Diff for: ‎src/components/toolbar/__tests__/__snapshots__/toolbarFieldGroupVariant.test.js.snap

+21-13
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,27 @@
33
exports[`ToolbarFieldGroupVariant Component should generate select options: toolbarFieldOptions 1`] = `
44
[
55
{
6-
"selected": false,
6+
"isSelected": false,
77
"title": "t(curiosity-toolbar.label_groupVariant, {"context":"dolor"})",
88
"value": "dolor",
99
},
1010
{
11-
"selected": false,
11+
"isSelected": false,
1212
"title": "t(curiosity-toolbar.label_groupVariant, {"context":"ipsum"})",
1313
"value": "ipsum",
1414
},
1515
{
16-
"selected": false,
16+
"isSelected": false,
1717
"title": "t(curiosity-toolbar.label_groupVariant, {"context":"lorem"})",
1818
"value": "lorem",
1919
},
2020
{
21-
"selected": false,
21+
"isSelected": false,
2222
"title": "t(curiosity-toolbar.label_groupVariant, {"context":"sit"})",
2323
"value": "sit",
2424
},
2525
{
26-
"selected": false,
26+
"isSelected": false,
2727
"title": "t(curiosity-toolbar.label, {"context":"groupVariant"})",
2828
"value": "",
2929
},
@@ -79,36 +79,40 @@ exports[`ToolbarFieldGroupVariant Component should render a basic component: bas
7979
8080
</ToolbarItem>
8181
<Select
82+
alignment={
83+
{
84+
"position": "left",
85+
}
86+
}
8287
aria-label="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
8388
data-test="toolbarFieldGroupVariant"
8489
maxHeight={310}
8590
onSelect={[Function]}
8691
options={
8792
[
8893
{
89-
"selected": undefined,
94+
"isSelected": undefined,
9095
"title": "lorem",
9196
"value": "lorem",
9297
},
9398
{
94-
"selected": undefined,
99+
"isSelected": undefined,
95100
"title": "ipsum",
96101
"value": "ipsum",
97102
},
98103
{
99-
"selected": undefined,
104+
"isSelected": undefined,
100105
"title": "dolor",
101106
"value": "dolor",
102107
},
103108
{
104-
"selected": undefined,
109+
"isSelected": undefined,
105110
"title": "sit",
106111
"value": "sit",
107112
},
108113
]
109114
}
110115
placeholder="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
111-
position="left"
112116
selectedOptions={null}
113117
/>
114118
</ToolbarContent>
@@ -132,26 +136,30 @@ exports[`ToolbarFieldGroupVariant Component should return a standalone component
132136
133137
</ToolbarItem>
134138
<Select
139+
alignment={
140+
{
141+
"position": "left",
142+
}
143+
}
135144
aria-label="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
136145
data-test="toolbarFieldGroupVariant"
137146
maxHeight={310}
138147
onSelect={[Function]}
139148
options={
140149
[
141150
{
142-
"selected": undefined,
151+
"isSelected": undefined,
143152
"title": "lorem",
144153
"value": "lorem",
145154
},
146155
{
147-
"selected": undefined,
156+
"isSelected": undefined,
148157
"title": "ipsum",
149158
"value": "ipsum",
150159
},
151160
]
152161
}
153162
placeholder="t(curiosity-toolbar.placeholder, {"context":"groupVariant"})"
154-
position="left"
155163
selectedOptions={null}
156164
/>
157165
</ToolbarContent>

Diff for: ‎src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap

+46-38
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
55
{
66
"_title": "current",
77
"isCurrent": true,
8-
"selected": false,
8+
"isSelected": false,
99
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})",
1010
"value": {
1111
"endDate": 2019-07-31T23:59:59.999Z,
@@ -14,7 +14,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
1414
},
1515
{
1616
"_title": "june",
17-
"selected": false,
17+
"isSelected": false,
1818
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})",
1919
"value": {
2020
"endDate": 2019-06-30T23:59:59.999Z,
@@ -23,7 +23,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
2323
},
2424
{
2525
"_title": "may",
26-
"selected": false,
26+
"isSelected": false,
2727
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})",
2828
"value": {
2929
"endDate": 2019-05-31T23:59:59.999Z,
@@ -32,7 +32,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
3232
},
3333
{
3434
"_title": "april",
35-
"selected": false,
35+
"isSelected": false,
3636
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})",
3737
"value": {
3838
"endDate": 2019-04-30T23:59:59.999Z,
@@ -41,7 +41,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
4141
},
4242
{
4343
"_title": "march",
44-
"selected": false,
44+
"isSelected": false,
4545
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})",
4646
"value": {
4747
"endDate": 2019-03-31T23:59:59.999Z,
@@ -50,7 +50,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
5050
},
5151
{
5252
"_title": "february",
53-
"selected": false,
53+
"isSelected": false,
5454
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})",
5555
"value": {
5656
"endDate": 2019-02-28T23:59:59.999Z,
@@ -59,7 +59,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
5959
},
6060
{
6161
"_title": "january",
62-
"selected": false,
62+
"isSelected": false,
6363
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})",
6464
"value": {
6565
"endDate": 2019-01-31T23:59:59.999Z,
@@ -68,7 +68,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
6868
},
6969
{
7070
"_title": "december",
71-
"selected": false,
71+
"isSelected": false,
7272
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})",
7373
"value": {
7474
"endDate": 2018-12-31T23:59:59.999Z,
@@ -77,7 +77,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
7777
},
7878
{
7979
"_title": "november",
80-
"selected": false,
80+
"isSelected": false,
8181
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})",
8282
"value": {
8383
"endDate": 2018-11-30T23:59:59.999Z,
@@ -86,7 +86,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
8686
},
8787
{
8888
"_title": "october",
89-
"selected": false,
89+
"isSelected": false,
9090
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})",
9191
"value": {
9292
"endDate": 2018-10-31T23:59:59.999Z,
@@ -95,7 +95,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
9595
},
9696
{
9797
"_title": "september",
98-
"selected": false,
98+
"isSelected": false,
9999
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})",
100100
"value": {
101101
"endDate": 2018-09-30T23:59:59.999Z,
@@ -104,7 +104,7 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
104104
},
105105
{
106106
"_title": "august",
107-
"selected": false,
107+
"isSelected": false,
108108
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})",
109109
"value": {
110110
"endDate": 2018-08-31T23:59:59.999Z,
@@ -116,6 +116,11 @@ exports[`ToolbarFieldRangedMonthly Component should export select options: toolb
116116

117117
exports[`ToolbarFieldRangedMonthly Component should handle selecting an option directly: selected option 1`] = `
118118
<Select
119+
alignment={
120+
{
121+
"position": "left",
122+
}
123+
}
119124
aria-label="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})"
120125
data-test="toolbarFieldRangeGranularity"
121126
maxHeight={250}
@@ -125,7 +130,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
125130
{
126131
"_title": "current",
127132
"isCurrent": true,
128-
"selected": false,
133+
"isSelected": false,
129134
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})",
130135
"value": {
131136
"endDate": 2019-07-31T23:59:59.999Z,
@@ -134,7 +139,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
134139
},
135140
{
136141
"_title": "june",
137-
"selected": false,
142+
"isSelected": false,
138143
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})",
139144
"value": {
140145
"endDate": 2019-06-30T23:59:59.999Z,
@@ -143,7 +148,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
143148
},
144149
{
145150
"_title": "may",
146-
"selected": false,
151+
"isSelected": false,
147152
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})",
148153
"value": {
149154
"endDate": 2019-05-31T23:59:59.999Z,
@@ -152,7 +157,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
152157
},
153158
{
154159
"_title": "april",
155-
"selected": false,
160+
"isSelected": false,
156161
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})",
157162
"value": {
158163
"endDate": 2019-04-30T23:59:59.999Z,
@@ -161,7 +166,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
161166
},
162167
{
163168
"_title": "march",
164-
"selected": false,
169+
"isSelected": false,
165170
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})",
166171
"value": {
167172
"endDate": 2019-03-31T23:59:59.999Z,
@@ -170,7 +175,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
170175
},
171176
{
172177
"_title": "february",
173-
"selected": false,
178+
"isSelected": false,
174179
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})",
175180
"value": {
176181
"endDate": 2019-02-28T23:59:59.999Z,
@@ -179,7 +184,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
179184
},
180185
{
181186
"_title": "january",
182-
"selected": false,
187+
"isSelected": false,
183188
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})",
184189
"value": {
185190
"endDate": 2019-01-31T23:59:59.999Z,
@@ -188,7 +193,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
188193
},
189194
{
190195
"_title": "december",
191-
"selected": false,
196+
"isSelected": false,
192197
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})",
193198
"value": {
194199
"endDate": 2018-12-31T23:59:59.999Z,
@@ -197,7 +202,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
197202
},
198203
{
199204
"_title": "november",
200-
"selected": false,
205+
"isSelected": false,
201206
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})",
202207
"value": {
203208
"endDate": 2018-11-30T23:59:59.999Z,
@@ -206,7 +211,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
206211
},
207212
{
208213
"_title": "october",
209-
"selected": false,
214+
"isSelected": false,
210215
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})",
211216
"value": {
212217
"endDate": 2018-10-31T23:59:59.999Z,
@@ -215,7 +220,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
215220
},
216221
{
217222
"_title": "september",
218-
"selected": false,
223+
"isSelected": false,
219224
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})",
220225
"value": {
221226
"endDate": 2018-09-30T23:59:59.999Z,
@@ -224,7 +229,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
224229
},
225230
{
226231
"_title": "august",
227-
"selected": true,
232+
"isSelected": true,
228233
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})",
229234
"value": {
230235
"endDate": 2018-08-31T23:59:59.999Z,
@@ -234,7 +239,6 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
234239
]
235240
}
236241
placeholder="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})"
237-
position="left"
238242
/>
239243
`;
240244

@@ -302,6 +306,11 @@ exports[`ToolbarFieldRangedMonthly Component should handle updating granularity
302306

303307
exports[`ToolbarFieldRangedMonthly Component should render a basic component: basic 1`] = `
304308
<Select
309+
alignment={
310+
{
311+
"position": "left",
312+
}
313+
}
305314
aria-label="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})"
306315
data-test="toolbarFieldRangeGranularity"
307316
maxHeight={250}
@@ -311,7 +320,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
311320
{
312321
"_title": "current",
313322
"isCurrent": true,
314-
"selected": false,
323+
"isSelected": false,
315324
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})",
316325
"value": {
317326
"endDate": 2019-07-31T23:59:59.999Z,
@@ -320,7 +329,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
320329
},
321330
{
322331
"_title": "june",
323-
"selected": false,
332+
"isSelected": false,
324333
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})",
325334
"value": {
326335
"endDate": 2019-06-30T23:59:59.999Z,
@@ -329,7 +338,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
329338
},
330339
{
331340
"_title": "may",
332-
"selected": false,
341+
"isSelected": false,
333342
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})",
334343
"value": {
335344
"endDate": 2019-05-31T23:59:59.999Z,
@@ -338,7 +347,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
338347
},
339348
{
340349
"_title": "april",
341-
"selected": false,
350+
"isSelected": false,
342351
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})",
343352
"value": {
344353
"endDate": 2019-04-30T23:59:59.999Z,
@@ -347,7 +356,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
347356
},
348357
{
349358
"_title": "march",
350-
"selected": false,
359+
"isSelected": false,
351360
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})",
352361
"value": {
353362
"endDate": 2019-03-31T23:59:59.999Z,
@@ -356,7 +365,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
356365
},
357366
{
358367
"_title": "february",
359-
"selected": false,
368+
"isSelected": false,
360369
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})",
361370
"value": {
362371
"endDate": 2019-02-28T23:59:59.999Z,
@@ -365,7 +374,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
365374
},
366375
{
367376
"_title": "january",
368-
"selected": false,
377+
"isSelected": false,
369378
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})",
370379
"value": {
371380
"endDate": 2019-01-31T23:59:59.999Z,
@@ -374,7 +383,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
374383
},
375384
{
376385
"_title": "december",
377-
"selected": false,
386+
"isSelected": false,
378387
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})",
379388
"value": {
380389
"endDate": 2018-12-31T23:59:59.999Z,
@@ -383,7 +392,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
383392
},
384393
{
385394
"_title": "november",
386-
"selected": false,
395+
"isSelected": false,
387396
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})",
388397
"value": {
389398
"endDate": 2018-11-30T23:59:59.999Z,
@@ -392,7 +401,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
392401
},
393402
{
394403
"_title": "october",
395-
"selected": false,
404+
"isSelected": false,
396405
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})",
397406
"value": {
398407
"endDate": 2018-10-31T23:59:59.999Z,
@@ -401,7 +410,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
401410
},
402411
{
403412
"_title": "september",
404-
"selected": false,
413+
"isSelected": false,
405414
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})",
406415
"value": {
407416
"endDate": 2018-09-30T23:59:59.999Z,
@@ -410,7 +419,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
410419
},
411420
{
412421
"_title": "august",
413-
"selected": false,
422+
"isSelected": false,
414423
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})",
415424
"value": {
416425
"endDate": 2018-08-31T23:59:59.999Z,
@@ -420,6 +429,5 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
420429
]
421430
}
422431
placeholder="t(curiosity-toolbar.placeholder, {"context":"rangedMonthly"})"
423-
position="left"
424432
/>
425433
`;

Diff for: ‎src/components/toolbar/__tests__/__snapshots__/toolbarFieldSelectCategory.test.js.snap

+39-35
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,41 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
55
{
66
"component": [Function],
77
"isClearable": false,
8+
"isSelected": false,
89
"options": [
910
{
10-
"selected": false,
11+
"isSelected": false,
1112
"title": "t(curiosity-toolbar.label_granularity, {"context":"Daily"})",
1213
"value": "Daily",
1314
},
1415
{
15-
"selected": false,
16+
"isSelected": false,
1617
"title": "t(curiosity-toolbar.label_granularity, {"context":"Weekly"})",
1718
"value": "Weekly",
1819
},
1920
{
20-
"selected": false,
21+
"isSelected": false,
2122
"title": "t(curiosity-toolbar.label_granularity, {"context":"Monthly"})",
2223
"value": "Monthly",
2324
},
2425
{
25-
"selected": false,
26+
"isSelected": false,
2627
"title": "t(curiosity-toolbar.label_granularity, {"context":"Quarterly"})",
2728
"value": "Quarterly",
2829
},
2930
],
30-
"selected": false,
3131
"title": "t(curiosity-toolbar.label_filter, {"context":"granularity"})",
3232
"value": "granularity",
3333
},
3434
{
3535
"component": [Function],
3636
"isClearable": false,
37+
"isSelected": false,
3738
"options": [
3839
{
3940
"_title": "current",
4041
"isCurrent": true,
41-
"selected": false,
42+
"isSelected": false,
4243
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"current"})",
4344
"value": {
4445
"endDate": 2019-07-31T23:59:59.999Z,
@@ -47,7 +48,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
4748
},
4849
{
4950
"_title": "june",
50-
"selected": false,
51+
"isSelected": false,
5152
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"June"})",
5253
"value": {
5354
"endDate": 2019-06-30T23:59:59.999Z,
@@ -56,7 +57,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
5657
},
5758
{
5859
"_title": "may",
59-
"selected": false,
60+
"isSelected": false,
6061
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"May"})",
6162
"value": {
6263
"endDate": 2019-05-31T23:59:59.999Z,
@@ -65,7 +66,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
6566
},
6667
{
6768
"_title": "april",
68-
"selected": false,
69+
"isSelected": false,
6970
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"April"})",
7071
"value": {
7172
"endDate": 2019-04-30T23:59:59.999Z,
@@ -74,7 +75,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
7475
},
7576
{
7677
"_title": "march",
77-
"selected": false,
78+
"isSelected": false,
7879
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"March"})",
7980
"value": {
8081
"endDate": 2019-03-31T23:59:59.999Z,
@@ -83,7 +84,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
8384
},
8485
{
8586
"_title": "february",
86-
"selected": false,
87+
"isSelected": false,
8788
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"February"})",
8889
"value": {
8990
"endDate": 2019-02-28T23:59:59.999Z,
@@ -92,7 +93,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
9293
},
9394
{
9495
"_title": "january",
95-
"selected": false,
96+
"isSelected": false,
9697
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"January"})",
9798
"value": {
9899
"endDate": 2019-01-31T23:59:59.999Z,
@@ -101,7 +102,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
101102
},
102103
{
103104
"_title": "december",
104-
"selected": false,
105+
"isSelected": false,
105106
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"December 2018"})",
106107
"value": {
107108
"endDate": 2018-12-31T23:59:59.999Z,
@@ -110,7 +111,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
110111
},
111112
{
112113
"_title": "november",
113-
"selected": false,
114+
"isSelected": false,
114115
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"November 2018"})",
115116
"value": {
116117
"endDate": 2018-11-30T23:59:59.999Z,
@@ -119,7 +120,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
119120
},
120121
{
121122
"_title": "october",
122-
"selected": false,
123+
"isSelected": false,
123124
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"October 2018"})",
124125
"value": {
125126
"endDate": 2018-10-31T23:59:59.999Z,
@@ -128,7 +129,7 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
128129
},
129130
{
130131
"_title": "september",
131-
"selected": false,
132+
"isSelected": false,
132133
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"September 2018"})",
133134
"value": {
134135
"endDate": 2018-09-30T23:59:59.999Z,
@@ -137,45 +138,45 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
137138
},
138139
{
139140
"_title": "august",
140-
"selected": false,
141+
"isSelected": false,
141142
"title": "t(curiosity-toolbar.label_granularityRangedMonthly, {"context":"August 2018"})",
142143
"value": {
143144
"endDate": 2018-08-31T23:59:59.999Z,
144145
"startDate": 2018-08-01T00:00:00.000Z,
145146
},
146147
},
147148
],
148-
"selected": false,
149149
"title": "t(curiosity-toolbar.label_filter, {"context":"rangedMonthly"})",
150150
"value": "rangedMonthly",
151151
},
152152
{
153153
"component": [Function],
154154
"isClearable": true,
155+
"isSelected": false,
155156
"options": [
156157
{
157-
"selected": false,
158+
"isSelected": false,
158159
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"red hat"})",
159160
"value": "red hat",
160161
},
161162
{
162-
"selected": false,
163+
"isSelected": false,
163164
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"aws"})",
164165
"value": "aws",
165166
},
166167
{
167-
"selected": false,
168+
"isSelected": false,
168169
"title": "t(curiosity-toolbar.label_billing_provider, {"context":"azure"})",
169170
"value": "azure",
170171
},
171172
],
172-
"selected": false,
173173
"title": "t(curiosity-toolbar.label_filter_billing, {"context":"provider"})",
174174
"value": "billing_provider",
175175
},
176176
{
177177
"component": [Function],
178178
"isClearable": true,
179+
"isSelected": false,
179180
"options": [
180181
{
181182
"isSelected": false,
@@ -198,13 +199,13 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
198199
"value": "",
199200
},
200201
],
201-
"selected": false,
202202
"title": "t(curiosity-toolbar.label_filter, {"context":"sla"})",
203203
"value": "sla",
204204
},
205205
{
206206
"component": [Function],
207207
"isClearable": true,
208+
"isSelected": false,
208209
"options": [
209210
{
210211
"isSelected": false,
@@ -227,31 +228,30 @@ exports[`ToolbarFieldSelectCategory Component should export select options: tool
227228
"value": "",
228229
},
229230
],
230-
"selected": false,
231231
"title": "t(curiosity-toolbar.label_filter, {"context":"usage"})",
232232
"value": "usage",
233233
},
234234
{
235235
"component": [Function],
236236
"isClearable": true,
237+
"isSelected": false,
237238
"options": [],
238-
"selected": false,
239239
"title": "t(curiosity-toolbar.label_filter, {"context":"category"})",
240240
"value": "category",
241241
},
242242
{
243243
"component": [Function],
244244
"isClearable": true,
245+
"isSelected": false,
245246
"options": null,
246-
"selected": false,
247247
"title": "t(curiosity-toolbar.label_filter_display_name, {"context":"contains"})",
248248
"value": "display_name_contains",
249249
},
250250
{
251251
"component": [Function],
252252
"isClearable": false,
253+
"isSelected": false,
253254
"options": [],
254-
"selected": false,
255255
"title": "t(curiosity-toolbar.label_filter, {"context":"export"})",
256256
"value": "export",
257257
},
@@ -296,6 +296,7 @@ exports[`ToolbarFieldSelectCategory Component should render a basic component: b
296296
{
297297
"component": [Function],
298298
"isClearable": true,
299+
"isSelected": false,
299300
"options": [
300301
{
301302
"isSelected": false,
@@ -318,23 +319,26 @@ exports[`ToolbarFieldSelectCategory Component should render a basic component: b
318319
"value": "",
319320
},
320321
],
321-
"selected": false,
322322
"title": "t(curiosity-toolbar.label_filter, {"context":"usage"})",
323323
"value": "usage",
324324
},
325325
{
326326
"component": [Function],
327327
"isClearable": true,
328+
"isSelected": false,
328329
"options": [],
329-
"selected": false,
330330
"title": "t(curiosity-toolbar.label_filter, {"context":"category"})",
331331
"value": "category",
332332
},
333333
]
334334
}
335335
placeholder="t(curiosity-toolbar.placeholder, {"context":"filter"})"
336336
selectedOptions="sla"
337-
toggleIcon={<FilterIcon />}
337+
toggle={
338+
{
339+
"icon": <FilterIcon />,
340+
}
341+
}
338342
/>
339343
`;
340344

@@ -346,6 +350,7 @@ exports[`ToolbarFieldSelectCategory Component should return options, and an upda
346350
{
347351
"component": [Function],
348352
"isClearable": true,
353+
"isSelected": false,
349354
"options": [
350355
{
351356
"isSelected": false,
@@ -368,13 +373,13 @@ exports[`ToolbarFieldSelectCategory Component should return options, and an upda
368373
"value": "",
369374
},
370375
],
371-
"selected": false,
372376
"title": "t(curiosity-toolbar.label_filter, {"context":"usage"})",
373377
"value": "usage",
374378
},
375379
{
376380
"component": [Function],
377381
"isClearable": true,
382+
"isSelected": true,
378383
"options": [
379384
{
380385
"isSelected": false,
@@ -397,7 +402,6 @@ exports[`ToolbarFieldSelectCategory Component should return options, and an upda
397402
"value": "",
398403
},
399404
],
400-
"selected": true,
401405
"title": "t(curiosity-toolbar.label_filter, {"context":"sla"})",
402406
"value": "sla",
403407
},
@@ -408,11 +412,12 @@ exports[`ToolbarFieldSelectCategory Component should return options, and an upda
408412
exports[`ToolbarFieldSelectCategory Component should return options, and an updated current category with a hook: options, initialCategory, hook 1`] = `
409413
{
410414
"currentCategory": undefined,
411-
"initialCategory": "usage",
415+
"initialCategory": undefined,
412416
"options": [
413417
{
414418
"component": [Function],
415419
"isClearable": true,
420+
"isSelected": false,
416421
"options": [
417422
{
418423
"isSelected": false,
@@ -435,13 +440,13 @@ exports[`ToolbarFieldSelectCategory Component should return options, and an upda
435440
"value": "",
436441
},
437442
],
438-
"selected": true,
439443
"title": "t(curiosity-toolbar.label_filter, {"context":"usage"})",
440444
"value": "usage",
441445
},
442446
{
443447
"component": [Function],
444448
"isClearable": true,
449+
"isSelected": false,
445450
"options": [
446451
{
447452
"isSelected": false,
@@ -464,7 +469,6 @@ exports[`ToolbarFieldSelectCategory Component should return options, and an upda
464469
"value": "",
465470
},
466471
],
467-
"selected": false,
468472
"title": "t(curiosity-toolbar.label_filter, {"context":"sla"})",
469473
"value": "sla",
470474
},

Diff for: ‎src/components/toolbar/__tests__/toolbarFieldBillingProvider.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ describe('ToolbarFieldBillingProvider Component', () => {
3838
const input = component.find('button');
3939
component.fireEvent.click(input);
4040

41-
const inputMenuItem = component.find('button.pf-v5-c-select__menu-item');
41+
const inputMenuItem = component.find('button.curiosity-select-pf__option');
4242
component.fireEvent.click(inputMenuItem);
4343

4444
expect(mockDispatch.mock.calls).toMatchSnapshot('dispatch, component');

Diff for: ‎src/components/toolbar/__tests__/toolbarFieldExport.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('ToolbarFieldExport Component', () => {
2626
const input = component.find('button');
2727
component.fireEvent.click(input);
2828

29-
const inputMenuItem = component.find('a.pf-v5-c-dropdown__menu-item');
29+
const inputMenuItem = component.find('button.curiosity-select-pf__option');
3030
component.fireEvent.click(inputMenuItem);
3131

3232
expect(mockOnSelect).toHaveBeenCalledTimes(1);

Diff for: ‎src/components/toolbar/__tests__/toolbarFieldGranularity.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('ToolbarFieldGranularity Component', () => {
3737
const input = component.find('button');
3838
component.fireEvent.click(input);
3939

40-
const inputMenuItem = component.find('button.pf-v5-c-select__menu-item');
40+
const inputMenuItem = component.find('button.curiosity-select-pf__option');
4141
component.fireEvent.click(inputMenuItem);
4242

4343
expect(mockDispatch.mock.calls).toMatchSnapshot('dispatch, component');

Diff for: ‎src/components/toolbar/__tests__/toolbarFieldGroupVariant.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ describe('ToolbarFieldGroupVariant Component', () => {
8181
const input = component.find('button');
8282
component.fireEvent.click(input);
8383

84-
const inputMenuItem = component.find('button.pf-v5-c-select__menu-item');
84+
const inputMenuItem = component.find('button.curiosity-select-pf__option');
8585
component.fireEvent.click(inputMenuItem);
8686

8787
expect(mockDispatch.mock.calls).toMatchSnapshot('dispatch, component');

Diff for: ‎src/components/toolbar/__tests__/toolbarFieldRangedMonthly.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ describe('ToolbarFieldRangedMonthly Component', () => {
4646
const input = component.find('button');
4747
component.fireEvent.click(input);
4848

49-
const inputMenuItem = component.find('button.pf-v5-c-select__menu-item');
49+
const inputMenuItem = component.find('button.curiosity-select-pf__option');
5050
component.fireEvent.click(inputMenuItem);
5151

5252
expect(mockDispatch.mock.calls).toMatchSnapshot('dispatch, component');

Diff for: ‎src/components/toolbar/__tests__/toolbarFieldSelectCategory.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe('ToolbarFieldSelectCategory Component', () => {
4747
const input = component.find('button');
4848
component.fireEvent.click(input);
4949

50-
const inputMenuItem = component.find('button.pf-v5-c-select__menu-item');
50+
const inputMenuItem = component.find('button.curiosity-select-pf__option');
5151
component.fireEvent.click(inputMenuItem);
5252

5353
expect(mockDispatch.mock.calls).toMatchSnapshot('dispatch, component');

Diff for: ‎src/components/toolbar/toolbarFieldBillingProvider.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { reduxTypes, storeHooks } from '../../redux';
33
import { useProduct, useProductQuery } from '../productView/productViewContext';
4-
import { Select, SelectPosition } from '../form/select.deprecated';
4+
import { Select, SelectPosition } from '../form/select';
55
import {
66
RHSM_API_QUERY_BILLING_PROVIDER_TYPES as FIELD_TYPES,
77
RHSM_API_QUERY_SET_TYPES
@@ -18,12 +18,12 @@ import { translate } from '../i18n/i18n';
1818
/**
1919
* Select field options.
2020
*
21-
* @type {Array<{title: React.ReactNode, value: string, selected: boolean}>}
21+
* @type {Array<{title: React.ReactNode, value: string, isSelected: boolean}>}
2222
*/
2323
const toolbarFieldOptions = Object.values(FIELD_TYPES).map(type => ({
2424
title: translate('curiosity-toolbar.label', { context: ['billing_provider', (type === '' && 'none') || type] }),
2525
value: type,
26-
selected: false
26+
isSelected: false
2727
}));
2828

2929
/**
@@ -81,7 +81,7 @@ const ToolbarFieldBillingProvider = ({
8181
const { [RHSM_API_QUERY_SET_TYPES.BILLING_PROVIDER]: updatedValue } = useAliasProductQuery();
8282
const onSelect = useAliasOnSelect();
8383

84-
const updatedOptions = options.map(option => ({ ...option, selected: option.value === updatedValue }));
84+
const updatedOptions = options.map(option => ({ ...option, isSelected: option.value === updatedValue }));
8585

8686
return (
8787
<Select
@@ -90,7 +90,7 @@ const ToolbarFieldBillingProvider = ({
9090
options={updatedOptions}
9191
selectedOptions={updatedValue}
9292
placeholder={t(`curiosity-toolbar.placeholder${(isFilter && '_filter') || ''}`, { context: 'billing_provider' })}
93-
position={position}
93+
alignment={{ position }}
9494
data-test="toolbarFieldBillingProvider"
9595
/>
9696
);

Diff for: ‎src/components/toolbar/toolbarFieldExport.js

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { useProduct, useProductExportQuery } from '../productView/productViewContext';
33
import { useExport, useExistingExports, useExportStatus } from './toolbarFieldExportContext';
4-
import { Select, SelectPosition, SelectButtonVariant } from '../form/select.deprecated';
4+
import { Select, SelectButtonVariant, SelectPosition, SelectVariant } from '../form/select';
55
import {
66
PLATFORM_API_EXPORT_APPLICATION_TYPES as APP_TYPES,
77
PLATFORM_API_EXPORT_CONTENT_TYPES as FIELD_TYPES,
@@ -22,12 +22,12 @@ import { dateHelpers, helpers } from '../../common';
2222
/**
2323
* Select field options.
2424
*
25-
* @type {Array<{title: React.ReactNode, value: string, selected: boolean}>}
25+
* @type {Array<{title: React.ReactNode, value: string, isSelected: boolean}>}
2626
*/
2727
const toolbarFieldOptions = Object.values(FIELD_TYPES).map(type => ({
2828
title: translate('curiosity-toolbar.label', { context: ['export', type] }),
2929
value: type,
30-
selected: false
30+
isSelected: false
3131
}));
3232

3333
/**
@@ -109,7 +109,7 @@ const ToolbarFieldExport = ({
109109
pendingProductFormats?.includes(option.value) &&
110110
t('curiosity-toolbar.label', { context: ['export', 'loading'] })) ||
111111
option.title,
112-
selected: isProductPending && pendingProductFormats?.includes(option.value),
112+
isSelected: isProductPending && pendingProductFormats?.includes(option.value),
113113
isDisabled:
114114
(isProductPending && !pendingProductFormats?.length) ||
115115
(isProductPending && pendingProductFormats?.includes(option.value))
@@ -120,15 +120,14 @@ const ToolbarFieldExport = ({
120120
return (
121121
<Select
122122
title={t('curiosity-toolbar.placeholder', { context: 'export' })}
123-
isDropdownButton
123+
variant={SelectVariant.dropdown}
124124
aria-label={t('curiosity-toolbar.placeholder', { context: 'export' })}
125125
onSelect={onSelect}
126126
options={updatedOptions}
127127
placeholder={t('curiosity-toolbar.placeholder', { context: 'export' })}
128-
position={position}
128+
alignment={{ position }}
129129
data-test="toolbarFieldExport"
130-
buttonVariant={SelectButtonVariant.secondary}
131-
buttonContent={t('curiosity-toolbar.label', { context: 'export' })}
130+
toggle={{ variant: SelectButtonVariant.secondary, content: t('curiosity-toolbar.label', { context: 'export' }) }}
132131
/>
133132
);
134133
};

Diff for: ‎src/components/toolbar/toolbarFieldGranularity.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { reduxTypes, storeHooks } from '../../redux';
33
import { useProduct, useProductGraphTallyQuery } from '../productView/productViewContext';
4-
import { Select, SelectPosition } from '../form/select.deprecated';
4+
import { Select, SelectPosition } from '../form/select';
55
import {
66
RHSM_API_QUERY_GRANULARITY_TYPES as FIELD_TYPES,
77
RHSM_API_QUERY_SET_TYPES
@@ -19,12 +19,12 @@ import { translate } from '../i18n/i18n';
1919
/**
2020
* Select field options.
2121
*
22-
* @type {Array<{title: React.ReactNode, value: string, selected: boolean}>}
22+
* @type {Array<{title: React.ReactNode, value: string, isSelected: boolean}>}
2323
*/
2424
const toolbarFieldOptions = Object.values(FIELD_TYPES).map(type => ({
2525
title: translate('curiosity-toolbar.label', { context: ['granularity', type] }),
2626
value: type,
27-
selected: false
27+
isSelected: false
2828
}));
2929

3030
/**
@@ -94,7 +94,7 @@ const ToolbarFieldGranularity = ({
9494
}) => {
9595
const { [RHSM_API_QUERY_SET_TYPES.GRANULARITY]: updatedValue } = useAliasProductGraphTallyQuery();
9696
const onSelect = useAliasOnSelect();
97-
const updatedOptions = options.map(option => ({ ...option, selected: option.value === updatedValue }));
97+
const updatedOptions = options.map(option => ({ ...option, isSelected: option.value === updatedValue }));
9898

9999
return (
100100
<Select
@@ -103,7 +103,7 @@ const ToolbarFieldGranularity = ({
103103
options={updatedOptions}
104104
selectedOptions={updatedValue}
105105
placeholder={t(`curiosity-toolbar.placeholder${(isFilter && '_filter') || ''}`, { context: 'granularity' })}
106-
position={position}
106+
alignment={{ position }}
107107
data-test="toolbarFieldGranularity"
108108
/>
109109
);

Diff for: ‎src/components/toolbar/toolbarFieldGroupVariant.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { Toolbar as PfToolbar, ToolbarContent, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
33
import { reduxTypes, storeHooks } from '../../redux';
44
import { useProduct } from '../productView/productViewContext';
5-
import { Select, SelectPosition } from '../form/select.deprecated';
5+
import { Select, SelectPosition } from '../form/select';
66
import { translate } from '../i18n/i18n';
77
import { routerContext } from '../router';
88

@@ -32,7 +32,7 @@ const useToolbarFieldOptions = ({
3232
options.push({
3333
title: t('curiosity-toolbar.label', { context: ['groupVariant', variant] }),
3434
value: variant,
35-
selected: variant === firstMatch?.productId
35+
isSelected: variant === firstMatch?.productId
3636
});
3737
});
3838

@@ -100,7 +100,7 @@ const ToolbarFieldGroupVariant = ({
100100
const options = useAliasToolbarFieldOptions();
101101
const updatedOptions = options.map(option => ({
102102
...option,
103-
selected: (updatedValue && option.value === updatedValue) || option?.selected
103+
isSelected: (updatedValue && option.value === updatedValue) || option?.isSelected
104104
}));
105105

106106
if (options?.length <= 1) {
@@ -118,7 +118,7 @@ const ToolbarFieldGroupVariant = ({
118118
options={updatedOptions}
119119
selectedOptions={updatedValue}
120120
placeholder={t('curiosity-toolbar.placeholder', { context: [isFilter && 'filter', 'groupVariant'] })}
121-
position={position}
121+
alignment={{ position }}
122122
maxHeight={310}
123123
data-test="toolbarFieldGroupVariant"
124124
/>

Diff for: ‎src/components/toolbar/toolbarFieldRangedMonthly.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { reduxTypes, storeHooks } from '../../redux';
33
import { useProduct, useProductGraphTallyQuery } from '../productView/productViewContext';
4-
import { Select, SelectPosition } from '../form/select.deprecated';
4+
import { Select, SelectPosition } from '../form/select';
55
import {
66
RHSM_API_QUERY_GRANULARITY_TYPES as FIELD_TYPES,
77
RHSM_API_QUERY_SET_TYPES
@@ -19,11 +19,11 @@ import { translate } from '../i18n/i18n';
1919
/**
2020
* Select field options.
2121
*
22-
* @type {Array<{title: React.ReactNode, value: string, selected: boolean}>}
22+
* @type {Array<{title: React.ReactNode, value: string, isSelected: boolean}>}
2323
*/
2424
const toolbarFieldOptions = dateHelpers.getRangedMonthDateTime().listDateTimeRanges.map(dateTime => ({
2525
...dateTime,
26-
selected: false
26+
isSelected: false
2727
}));
2828

2929
/**
@@ -96,7 +96,7 @@ const ToolbarFieldRangedMonthly = ({
9696

9797
const updatedOptions = options.map(option => ({
9898
...option,
99-
selected: option.title === updatedValue || option.value.startDate.toISOString() === updatedValue
99+
isSelected: option.title === updatedValue || option.value.startDate.toISOString() === updatedValue
100100
}));
101101

102102
return (
@@ -105,8 +105,8 @@ const ToolbarFieldRangedMonthly = ({
105105
onSelect={onSelect}
106106
options={updatedOptions}
107107
placeholder={t(`curiosity-toolbar.placeholder${(isFilter && '_filter') || ''}`, { context: 'rangedMonthly' })}
108-
position={position}
109108
maxHeight={250}
109+
alignment={{ position }}
110110
data-test="toolbarFieldRangeGranularity"
111111
/>
112112
);

Diff for: ‎src/components/toolbar/toolbarFieldSelectCategory.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FilterIcon } from '@patternfly/react-icons';
33
import { useShallowCompareEffect } from 'react-use';
44
import { reduxTypes, storeHooks } from '../../redux';
55
import { useProduct, useProductToolbarConfig } from '../productView/productViewContext';
6-
import { Select } from '../form/select.deprecated';
6+
import { Select } from '../form/select';
77
import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants';
88
import { translate } from '../i18n/i18n';
99
import {
@@ -27,7 +27,7 @@ import { ToolbarFieldUsage, toolbarFieldOptions as usageOptions } from './toolba
2727
* Select field options. Use function instead of arrow func to help with component
2828
* display name during testing.
2929
*
30-
* @type {Array<{title: React.ReactNode, value: string, selected: boolean}>}
30+
* @type {Array<{title: React.ReactNode, value: string, isSelected: boolean}>}
3131
*/
3232
const toolbarFieldOptions = [
3333
{
@@ -104,7 +104,7 @@ const toolbarFieldOptions = [
104104
}
105105
].map(option => ({
106106
...option,
107-
selected: false
107+
isSelected: false
108108
}));
109109

110110
/**
@@ -142,7 +142,7 @@ const useOnSelect = ({
142142
* @param {useProductToolbarConfig} [options.useProductToolbarConfig=useProductToolbarConfig]
143143
* @param {storeHooks.reactRedux.useSelector} [options.useSelector=storeHooks.reactRedux.useSelector]
144144
* @returns {{currentCategory: unknown, initialCategory: string, options: Array<{title: React.ReactNode,
145-
* value: string, selected: boolean}>}}
145+
* value: string, isSelected: boolean}>}}
146146
*/
147147
const useSelectCategoryOptions = ({
148148
categoryOptions = toolbarFieldOptions,
@@ -158,16 +158,16 @@ const useSelectCategoryOptions = ({
158158

159159
const updatedOptions = filters
160160
.filter(({ isItem, isSecondary }) => !isItem && !isSecondary)
161-
.map(({ id, selected }) => {
161+
.map(({ id, isSelected }) => {
162162
const option = categoryOptions.find(({ value }) => id === value);
163163

164-
if (updatedValue === undefined && selected) {
164+
if (updatedValue === undefined && isSelected) {
165165
initialValue = option.value;
166166
}
167167

168168
return {
169169
...option,
170-
selected: (updatedValue === undefined && selected) || updatedValue === option.value
170+
isSelected: (updatedValue === undefined && isSelected) || updatedValue === option.value
171171
};
172172
});
173173

@@ -209,7 +209,7 @@ const ToolbarFieldSelectCategory = ({
209209
options={options}
210210
selectedOptions={updatedValue}
211211
placeholder={t('curiosity-toolbar.placeholder', { context: ['filter'] })}
212-
toggleIcon={<FilterIcon />}
212+
toggle={{ icon: <FilterIcon /> }}
213213
data-test="toolbarFieldCategory"
214214
/>
215215
);

Diff for: ‎src/config/product.rhel.js

-1
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,6 @@ const config = {
355355
},
356356
{
357357
id: RHSM_API_QUERY_SET_TYPES.USAGE,
358-
selected: true,
359358
isSelected: true
360359
},
361360
{

Diff for: ‎src/config/product.satellite.js

-1
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,6 @@ const config = {
272272
},
273273
{
274274
id: RHSM_API_QUERY_SET_TYPES.USAGE,
275-
selected: true,
276275
isSelected: true
277276
},
278277
{

Diff for: ‎tests/__snapshots__/dist.test.js.snap

+7-8
Original file line numberDiff line numberDiff line change
@@ -777,13 +777,12 @@ exports[`Build distribution should have a predictable ephemeral navigation based
777777
exports[`Build distribution should match a specific file output 1`] = `
778778
[
779779
"",
780-
"./dist/css/2148*css",
781780
"./dist/css/562*css",
781+
"./dist/css/9034*css",
782782
"./dist/fed-mods.json",
783783
"./dist/fonts/graph2x.png",
784784
"./dist/fonts/graph4x.png",
785785
"./dist/js/1003*js",
786-
"./dist/js/1117*js",
787786
"./dist/js/1132*js",
788787
"./dist/js/1295*js",
789788
"./dist/js/1309*js",
@@ -798,9 +797,8 @@ exports[`Build distribution should match a specific file output 1`] = `
798797
"./dist/js/2007*js",
799798
"./dist/js/203*js",
800799
"./dist/js/2047*js",
801-
"./dist/js/2148*js",
802800
"./dist/js/2471*js",
803-
"./dist/js/2531*js",
801+
"./dist/js/279*js",
804802
"./dist/js/2843*js",
805803
"./dist/js/2913*js",
806804
"./dist/js/293*js",
@@ -809,7 +807,6 @@ exports[`Build distribution should match a specific file output 1`] = `
809807
"./dist/js/310*js",
810808
"./dist/js/3114*js",
811809
"./dist/js/3219*js",
812-
"./dist/js/3294*js",
813810
"./dist/js/3676*js",
814811
"./dist/js/3690*js",
815812
"./dist/js/3693*js",
@@ -829,7 +826,6 @@ exports[`Build distribution should match a specific file output 1`] = `
829826
"./dist/js/459*txt",
830827
"./dist/js/4661*js",
831828
"./dist/js/4869*js",
832-
"./dist/js/4912*js",
833829
"./dist/js/4915*js",
834830
"./dist/js/4927*js",
835831
"./dist/js/5093*js",
@@ -846,7 +842,6 @@ exports[`Build distribution should match a specific file output 1`] = `
846842
"./dist/js/6074*js",
847843
"./dist/js/6137*js",
848844
"./dist/js/6161*js",
849-
"./dist/js/6247*js",
850845
"./dist/js/6322*js",
851846
"./dist/js/6335*js",
852847
"./dist/js/6468*js",
@@ -855,11 +850,14 @@ exports[`Build distribution should match a specific file output 1`] = `
855850
"./dist/js/6686*js",
856851
"./dist/js/6752*js",
857852
"./dist/js/7019*js",
853+
"./dist/js/7030*js",
858854
"./dist/js/709*js",
859855
"./dist/js/72*js",
860856
"./dist/js/7224*js",
861857
"./dist/js/7250*js",
858+
"./dist/js/7382*js",
862859
"./dist/js/744*js",
860+
"./dist/js/7453*js",
863861
"./dist/js/7454*js",
864862
"./dist/js/7474*js",
865863
"./dist/js/7675*js",
@@ -873,13 +871,14 @@ exports[`Build distribution should match a specific file output 1`] = `
873871
"./dist/js/8545*js",
874872
"./dist/js/8716*js",
875873
"./dist/js/8923*js",
874+
"./dist/js/9034*js",
876875
"./dist/js/9067*js",
877876
"./dist/js/9205*js",
878877
"./dist/js/926*js",
879878
"./dist/js/9400*js",
880879
"./dist/js/9594*js",
881880
"./dist/js/9672*js",
882-
"./dist/js/9928*js",
881+
"./dist/js/9834*js",
883882
"./dist/js/App*js",
884883
"./dist/js/exposed-./RootApp*js",
885884
"./dist/locales/en-US.json",

0 commit comments

Comments
 (0)
Please sign in to comment.