Skip to content

Commit b036dd6

Browse files
cdcabreracdcabrera
authored
fix(toolbarFields): sw-3443 state refs from view to productId (#1564)
* toolbarFields, all fields move from viewId to productId * toolbarFieldDisplayName, reset field via productId key * viewReducer, reset all queries based on productId
1 parent 4a6d619 commit b036dd6

23 files changed

+182
-86
lines changed

‎src/components/graphCard/__tests__/__snapshots__/graphCardChartLegend.test.js.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`GraphCardChartLegend Component should handle a click event: click event
44
[
55
[
66
{
7-
"id": "mock-view-id-loremIpsum_mock-product-id",
7+
"id": "loremIpsum_mock-product-id",
88
"type": "SET_GRAPH_LEGEND",
99
"value": "mock toggle boolean, loremIpsum_mock-product-id",
1010
},
@@ -16,14 +16,14 @@ exports[`GraphCardChartLegend Component should handle a click event: keyPress ev
1616
[
1717
[
1818
{
19-
"id": "mock-view-id-loremIpsum_mock-product-id",
19+
"id": "loremIpsum_mock-product-id",
2020
"type": "SET_GRAPH_LEGEND",
2121
"value": "mock toggle boolean, loremIpsum_mock-product-id",
2222
},
2323
],
2424
[
2525
{
26-
"id": "mock-view-id-loremIpsum_mock-product-id",
26+
"id": "loremIpsum_mock-product-id",
2727
"type": "SET_GRAPH_LEGEND",
2828
"value": "mock toggle boolean, loremIpsum_mock-product-id",
2929
},

‎src/components/graphCard/graphCardChartLegend.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,16 @@ const GraphCardChartLegend = ({
4444
useSelectors: useAliasSelectors = storeHooks.reactRedux.useSelectors
4545
}) => {
4646
const { settings = {} } = useAliasGraphCardContext();
47-
const { productLabel, viewId } = useAliasProduct();
47+
const { productId, productLabel } = useAliasProduct();
4848
const { isDisabledLegendClick } = settings;
4949

5050
const dispatch = useAliasDispatch();
5151
const [invertedLegendItem, ...legendItems] = useAliasSelectors([
52-
({ graph }) => graph.legend?.[`${viewId}-inverted`],
52+
({ graph }) => graph.legend?.[`${productId}-inverted`],
5353
...datum.dataSets.map(
5454
({ id }) =>
5555
({ graph }) =>
56-
graph.legend?.[`${viewId}-${id}`]
56+
graph.legend?.[id]
5757
)
5858
]);
5959

@@ -84,7 +84,7 @@ const GraphCardChartLegend = ({
8484

8585
dispatch({
8686
type: reduxTypes.graph.SET_GRAPH_LEGEND,
87-
id: `${viewId}-${id}`,
87+
id,
8888
value: updatedToggle
8989
});
9090
};

‎src/components/toolbar/__tests__/__snapshots__/toolbarFieldCategory.test.js.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -67,38 +67,38 @@ exports[`ToolbarFieldCategory Component should handle updating through redux sta
6767
[
6868
[
6969
{
70-
"id": "mock-view-id-inverted",
70+
"id": "mock-product-id-inverted",
7171
"type": "SET_GRAPH_LEGEND",
7272
"value": "hello_dolor sit_mock-product-id",
7373
},
7474
{
7575
"type": "SET_QUERY_RESET_INVENTORY_LIST",
76-
"viewId": "mock-view-id",
76+
"viewId": "mock-product-id",
7777
},
7878
{
7979
"filter": "category",
8080
"type": "SET_QUERY",
8181
"value": "dolor sit",
82-
"viewId": "mock-view-id",
82+
"viewId": "mock-product-id",
8383
},
8484
],
8585
],
8686
[
8787
[
8888
{
89-
"id": "mock-view-id-inverted",
89+
"id": "mock-product-id-inverted",
9090
"type": "SET_GRAPH_LEGEND",
9191
"value": "lorem ipsum",
9292
},
9393
{
9494
"type": "SET_QUERY_RESET_INVENTORY_LIST",
95-
"viewId": "mock-view-id",
95+
"viewId": "mock-product-id",
9696
},
9797
{
9898
"filter": "category",
9999
"type": "SET_QUERY",
100100
"value": "lorem ipsum",
101-
"viewId": "mock-view-id",
101+
"viewId": "mock-product-id",
102102
},
103103
],
104104
],

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ exports[`ToolbarFieldGroupVariant Component should handle updating through redux
3535
[
3636
[
3737
{
38-
"productGroup": undefined,
3938
"type": "SET_PRODUCT_VARIANT_QUERY_RESET_ALL",
39+
"variant": "ipsum",
4040
},
4141
{
4242
"productGroup": undefined,
@@ -53,8 +53,8 @@ exports[`ToolbarFieldGroupVariant Component should handle updating through redux
5353
[
5454
[
5555
{
56-
"productGroup": "loremIpsum",
5756
"type": "SET_PRODUCT_VARIANT_QUERY_RESET_ALL",
57+
"variant": "dolor sit",
5858
},
5959
{
6060
"productGroup": "loremIpsum",

‎src/components/toolbar/__tests__/toolbarFieldBillingProvider.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ describe('ToolbarFieldBillingProvider Component', () => {
4646

4747
it('should handle updating sla through redux state with hook', () => {
4848
const options = {
49-
useProduct: () => ({ viewId: 'loremIpsum' })
49+
useProduct: () => ({ productId: 'loremIpsum' })
5050
};
5151

5252
const onSelect = useOnSelect(options);

‎src/components/toolbar/__tests__/toolbarFieldDisplayName.test.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('ToolbarFieldDisplayName Component', () => {
1717

1818
it('should render a basic component', async () => {
1919
const props = {
20-
useProduct: () => ({ viewId: 'loremIpsum' }),
20+
useProduct: () => ({ productId: 'loremIpsum' }),
2121
useProductInventoryHostsQuery: () => ({ [RHSM_API_QUERY_SET_TYPES.DISPLAY_NAME]: 'lorem ipsum' })
2222
};
2323
const component = await shallowComponent(<ToolbarFieldDisplayName {...props} />);
@@ -27,7 +27,7 @@ describe('ToolbarFieldDisplayName Component', () => {
2727

2828
it('should handle updating display name through redux state', () => {
2929
const props = {
30-
useProduct: () => ({ viewId: 'loremIpsum' }),
30+
useProduct: () => ({ productId: 'loremIpsum' }),
3131
useProductInventoryHostsQuery: () => ({ [RHSM_API_QUERY_SET_TYPES.DISPLAY_NAME]: 'lorem ipsum' })
3232
};
3333

@@ -41,7 +41,7 @@ describe('ToolbarFieldDisplayName Component', () => {
4141

4242
it('should handle updating display name using the enter key', () => {
4343
const props = {
44-
useProduct: () => ({ viewId: 'loremIpsum' }),
44+
useProduct: () => ({ productId: 'loremIpsum' }),
4545
useProductInventoryHostsQuery: () => ({ [RHSM_API_QUERY_SET_TYPES.DISPLAY_NAME]: 'lorem ipsum' })
4646
};
4747

@@ -55,7 +55,7 @@ describe('ToolbarFieldDisplayName Component', () => {
5555

5656
it('should handle clearing display name through redux state', () => {
5757
const props = {
58-
useProduct: () => ({ viewId: 'loremIpsum' }),
58+
useProduct: () => ({ productId: 'loremIpsum' }),
5959
useProductInventoryHostsQuery: () => ({ [RHSM_API_QUERY_SET_TYPES.DISPLAY_NAME]: 'lorem ipsum' })
6060
};
6161

‎src/components/toolbar/__tests__/toolbarFieldGranularity.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('ToolbarFieldGranularity Component', () => {
4545

4646
it('should handle updating granularity through redux state with hook', () => {
4747
const options = {
48-
useProduct: () => ({ viewId: 'loremIpsum' })
48+
useProduct: () => ({ productId: 'loremIpsum' })
4949
};
5050

5151
const onSelect = useOnSelect(options);

‎src/components/toolbar/__tests__/toolbarFieldRangedMonthly.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ describe('ToolbarFieldRangedMonthly Component', () => {
5454

5555
it('should handle updating granularity and date through redux state with hook', () => {
5656
const options = {
57-
useProduct: () => ({ viewId: 'loremIpsum' })
57+
useProduct: () => ({ productId: 'loremIpsum' })
5858
};
5959

6060
const onSelect = useOnSelect(options);

‎src/components/toolbar/__tests__/toolbarFieldSelectCategory.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ describe('ToolbarFieldSelectCategory Component', () => {
5555

5656
it('should handle updating categories through redux state with hook', () => {
5757
const options = {
58-
useProduct: () => ({ viewId: 'loremIpsum' })
58+
useProduct: () => ({ productId: 'loremIpsum' })
5959
};
6060

6161
const onSelect = useOnSelect(options);

‎src/components/toolbar/__tests__/toolbarFieldSla.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ describe('ToolbarFieldSla Component', () => {
4242

4343
it('should handle updating sla through redux state with hook', () => {
4444
const options = {
45-
useProduct: () => ({ viewId: 'loremIpsum' })
45+
useProduct: () => ({ productId: 'loremIpsum' })
4646
};
4747

4848
const onSelect = useOnSelect(options);

‎src/components/toolbar/__tests__/toolbarFieldUsage.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe('ToolbarFieldSla Component', () => {
4545

4646
it('should handle updating usage through redux state with hook', () => {
4747
const options = {
48-
useProduct: () => ({ viewId: 'loremIpsum' })
48+
useProduct: () => ({ productId: 'loremIpsum' })
4949
};
5050

5151
const onSelect = useOnSelect(options);

‎src/components/toolbar/toolbarFieldBillingProvider.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,18 @@ const useOnSelect = ({
3838
useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
3939
useProduct: useAliasProduct = useProduct
4040
} = {}) => {
41-
const { viewId } = useAliasProduct();
41+
const { productId } = useAliasProduct();
4242
const dispatch = useAliasDispatch();
4343

4444
return ({ value = null } = {}) => {
4545
dispatch([
4646
{
4747
type: reduxTypes.query.SET_QUERY_RESET_INVENTORY_LIST,
48-
viewId
48+
viewId: productId
4949
},
5050
{
5151
type: reduxTypes.query.SET_QUERY,
52-
viewId,
52+
viewId: productId,
5353
filter: RHSM_API_QUERY_SET_TYPES.BILLING_PROVIDER,
5454
value
5555
}

‎src/components/toolbar/toolbarFieldCategory.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const useOnSelect = ({
7373
useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
7474
useProduct: useAliasProduct = useProduct
7575
} = {}) => {
76-
const { productId, viewId } = useAliasProduct();
76+
const { productId } = useAliasProduct();
7777
const dispatch = useAliasDispatch();
7878

7979
return ({ value = null, selected = {} } = {}) => {
@@ -90,16 +90,16 @@ const useOnSelect = ({
9090
dispatch([
9191
{
9292
type: reduxTypes.graph.SET_GRAPH_LEGEND,
93-
id: `${viewId}-inverted`,
93+
id: `${productId}-inverted`,
9494
value: updatedGraphLegendValue
9595
},
9696
{
9797
type: reduxTypes.query.SET_QUERY_RESET_INVENTORY_LIST,
98-
viewId
98+
viewId: productId
9999
},
100100
{
101101
type: reduxTypes.query.SET_QUERY,
102-
viewId,
102+
viewId: productId,
103103
filter: RHSM_API_QUERY_SET_TYPES.CATEGORY,
104104
value
105105
}

‎src/components/toolbar/toolbarFieldDisplayName.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const ToolbarFieldDisplayName = ({
3737
useProduct: useAliasProduct = useProduct,
3838
useProductInventoryHostsQuery: useAliasProductInventoryHostsQuery = useProductInventoryHostsQuery
3939
}) => {
40-
const { viewId } = useAliasProduct();
40+
const { productId } = useAliasProduct();
4141
const { [RHSM_API_QUERY_SET_TYPES.DISPLAY_NAME]: currentValue } = useAliasProductInventoryHostsQuery();
4242
const dispatch = useAliasDispatch();
4343

@@ -52,11 +52,11 @@ const ToolbarFieldDisplayName = ({
5252
dispatch([
5353
{
5454
type: reduxTypes.query.SET_QUERY_CLEAR_INVENTORY_LIST,
55-
viewId
55+
viewId: productId
5656
},
5757
{
5858
type: reduxTypes.query.SET_QUERY_INVENTORY_INSTANCES,
59-
viewId,
59+
viewId: productId,
6060
filter: RHSM_API_QUERY_SET_TYPES.DISPLAY_NAME,
6161
value: submitValue?.trim() || null
6262
}
@@ -76,11 +76,11 @@ const ToolbarFieldDisplayName = ({
7676
dispatch([
7777
{
7878
type: reduxTypes.query.SET_QUERY_CLEAR_INVENTORY_LIST,
79-
viewId
79+
viewId: productId
8080
},
8181
{
8282
type: reduxTypes.query.SET_QUERY_INVENTORY_INSTANCES,
83-
viewId,
83+
viewId: productId,
8484
filter: RHSM_API_QUERY_SET_TYPES.DISPLAY_NAME,
8585
value: null
8686
}
@@ -115,6 +115,7 @@ const ToolbarFieldDisplayName = ({
115115
<InputGroup>
116116
<InputGroupItem>
117117
<TextInput
118+
key={`display-name-${productId}`}
118119
customIcon={<SearchIcon />}
119120
aria-label={t('curiosity-toolbar.placeholder_filter', { context: 'displayName' })}
120121
className="curiosity-input__display-name"

‎src/components/toolbar/toolbarFieldGranularity.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -39,31 +39,31 @@ const useOnSelect = ({
3939
useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
4040
useProduct: useAliasProduct = useProduct
4141
} = {}) => {
42-
const { viewId } = useAliasProduct();
42+
const { productId } = useAliasProduct();
4343
const dispatch = useAliasDispatch();
4444

4545
return ({ value = null } = {}) => {
4646
const { startDate, endDate } = dateHelpers.getRangedDateTime(value);
4747
dispatch([
4848
{
4949
type: reduxTypes.query.SET_QUERY_CLEAR_INVENTORY_LIST,
50-
viewId
50+
viewId: productId
5151
},
5252
{
5353
type: reduxTypes.query.SET_QUERY_GRAPH,
54-
viewId,
54+
viewId: productId,
5555
filter: RHSM_API_QUERY_SET_TYPES.GRANULARITY,
5656
value
5757
},
5858
{
5959
type: reduxTypes.query.SET_QUERY,
60-
viewId,
60+
viewId: productId,
6161
filter: RHSM_API_QUERY_SET_TYPES.START_DATE,
6262
value: startDate.toISOString()
6363
},
6464
{
6565
type: reduxTypes.query.SET_QUERY,
66-
viewId,
66+
viewId: productId,
6767
filter: RHSM_API_QUERY_SET_TYPES.END_DATE,
6868
value: endDate.toISOString()
6969
}

‎src/components/toolbar/toolbarFieldGroupVariant.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const useOnSelect = ({
5858
dispatch([
5959
{
6060
type: reduxTypes.app.SET_PRODUCT_VARIANT_QUERY_RESET_ALL,
61-
productGroup
61+
variant: value
6262
},
6363
{
6464
type: reduxTypes.app.SET_PRODUCT_VARIANT,

‎src/components/toolbar/toolbarFieldRangedMonthly.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -38,31 +38,31 @@ const useOnSelect = ({
3838
useDispatch: useAliasDispatch = storeHooks.reactRedux.useDispatch,
3939
useProduct: useAliasProduct = useProduct
4040
} = {}) => {
41-
const { viewId } = useAliasProduct();
41+
const { productId } = useAliasProduct();
4242
const dispatch = useAliasDispatch();
4343

4444
return ({ value } = {}) => {
4545
const { startDate, endDate } = value;
4646
dispatch([
4747
{
4848
type: reduxTypes.query.SET_QUERY_CLEAR_INVENTORY_LIST,
49-
viewId
49+
viewId: productId
5050
},
5151
{
5252
type: reduxTypes.query.SET_QUERY_GRAPH,
53-
viewId,
53+
viewId: productId,
5454
filter: RHSM_API_QUERY_SET_TYPES.GRANULARITY,
5555
value: FIELD_TYPES.DAILY
5656
},
5757
{
5858
type: reduxTypes.query.SET_QUERY,
59-
viewId,
59+
viewId: productId,
6060
filter: RHSM_API_QUERY_SET_TYPES.START_DATE,
6161
value: startDate.toISOString()
6262
},
6363
{
6464
type: reduxTypes.query.SET_QUERY,
65-
viewId,
65+
viewId: productId,
6666
filter: RHSM_API_QUERY_SET_TYPES.END_DATE,
6767
value: endDate.toISOString()
6868
}

0 commit comments

Comments
 (0)