diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap index 19dc987d5..e83d28362 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap @@ -32,6 +32,7 @@ exports[`GraphCard Component should setup basic settings: settings, grouped 1`] + + + + + t(curiosity-graph.cardHeading, {}) + <GraphCardChartTitleTooltip + t={[Function]} + useGraphCardContext={[Function]} + useProduct={[Function]} + /> + + + + + + +
+ +
+ + + +`; + +exports[`GraphCardChart Component should handle API response states: fulfilled 1`] = ` + + + + + + t(curiosity-graph.cardHeading, {}) + <GraphCardChartTitleTooltip + t={[Function]} + useGraphCardContext={[Function]} + useProduct={[Function]} + /> + + + + + + +
+ +
+ + + +`; + +exports[`GraphCardChart Component should handle API response states: pending 1`] = ` + + + + + + t(curiosity-graph.cardHeading, {}) + <GraphCardChartTitleTooltip + t={[Function]} + useGraphCardContext={[Function]} + useProduct={[Function]} + /> + + + + + + +
+ +
+ + + +`; + +exports[`GraphCardChart Component should render a default component: default 1`] = ` diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap index 4ef3c9961..f206d567a 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCardContext.test.js.snap @@ -146,6 +146,7 @@ exports[`GraphCardContext should parse configuration: configuration, standalone "standaloneFiltersSettings": [ { "settings": { + "actions": undefined, "isStandalone": true, "metric": { "chartType": "area", @@ -232,6 +233,7 @@ exports[`GraphCardContext should return specific properties: specific properties "_threadCount": 0, }, "useGetMetrics": [Function], + "useGraphCardActions": [Function], "useGraphCardContext": [Function], "useMetricsSelector": [Function], "useParseFiltersSettings": [Function], diff --git a/src/components/graphCard/__tests__/graphCardChart.test.js b/src/components/graphCard/__tests__/graphCardChart.test.js index 816de2ce8..484829802 100644 --- a/src/components/graphCard/__tests__/graphCardChart.test.js +++ b/src/components/graphCard/__tests__/graphCardChart.test.js @@ -2,10 +2,27 @@ import React from 'react'; import { GraphCardChart } from '../graphCardChart'; describe('GraphCardChart Component', () => { - it('should render a basic component', async () => { + it('should render a default component', async () => { const props = {}; const component = await shallowHookComponent(); - expect(component).toMatchSnapshot('basic'); + expect(component).toMatchSnapshot('default'); + }); + + it('should handle API response states', async () => { + const props = { + useGetMetrics: () => ({ pending: true, error: false, fulfilled: false, dataSets: [] }) + }; + + const componentPending = await shallowHookComponent(); + expect(componentPending).toMatchSnapshot('pending'); + + props.useGetMetrics = () => ({ pending: false, error: true, fulfilled: false, dataSets: [] }); + const componentError = await shallowHookComponent(); + expect(componentError).toMatchSnapshot('error'); + + props.useGetMetrics = () => ({ pending: false, error: false, fulfilled: true, dataSets: [] }); + const componentFulfilled = await shallowHookComponent(); + expect(componentFulfilled).toMatchSnapshot('fulfilled'); }); }); diff --git a/src/components/graphCard/graphCardChart.js b/src/components/graphCard/graphCardChart.js index b8c7d69ba..c33dce6fc 100644 --- a/src/components/graphCard/graphCardChart.js +++ b/src/components/graphCard/graphCardChart.js @@ -1,8 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Card, CardActions, CardBody, CardHeader, CardTitle, Title } from '@patternfly/react-core'; +import { + Card, + CardActions, + CardBody, + CardHeader, + CardTitle, + Title, + Toolbar, + ToolbarContent, + ToolbarGroup +} from '@patternfly/react-core'; import { useProduct, useProductGraphTallyQuery } from '../productView/productViewContext'; -import { useGraphCardContext, useGetMetrics } from './graphCardContext'; +import { useGraphCardActions, useGraphCardContext, useGetMetrics } from './graphCardContext'; import { graphCardHelpers } from './graphCardHelpers'; import { Chart } from '../chart/chart'; import { GraphCardChartLegend } from './graphCardChartLegend'; @@ -19,6 +29,7 @@ import { translate } from '../i18n/i18n'; * @param {object} props * @param {Function} props.t * @param {Function} props.useGetMetrics + * @param {Function} props.useGraphCardActions * @param {Function} props.useGraphCardContext * @param {Function} props.useProduct * @param {Function} props.useProductGraphTallyQuery @@ -27,23 +38,19 @@ import { translate } from '../i18n/i18n'; const GraphCardChart = ({ t, useGetMetrics: useAliasGetMetrics, + useGraphCardActions: useAliasGraphCardActions, useGraphCardContext: useAliasGraphCardContext, useProduct: useAliasProduct, useProductGraphTallyQuery: useAliasProductGraphTallyQuery }) => { const { productId } = useAliasProduct(); + const updatedActionDisplay = useAliasGraphCardActions(); const { settings = {} } = useAliasGraphCardContext(); - const { actionDisplay, isStandalone, metric } = settings; + const { isStandalone, metric } = settings; const { [RHSM_API_QUERY_SET_TYPES.GRANULARITY]: granularity } = useAliasProductGraphTallyQuery(); const { pending, error, dataSets = [] } = useAliasGetMetrics(); - let updatedActionDisplay = null; - - if (typeof actionDisplay === 'function') { - updatedActionDisplay = actionDisplay({ data: dataSets }); - } - return ( @@ -55,7 +62,13 @@ const GraphCardChart = ({ {updatedActionDisplay && ( - {updatedActionDisplay} + + + + {updatedActionDisplay} + + + )} @@ -81,12 +94,13 @@ const GraphCardChart = ({ /** * Prop types. * - * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function, - * t: Function, useGetMetrics: Function}} + * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function, t: Function, + * useGetMetrics: Function, useGraphCardActions: Function}} */ GraphCardChart.propTypes = { t: PropTypes.func, useGetMetrics: PropTypes.func, + useGraphCardActions: PropTypes.func, useGraphCardContext: PropTypes.func, useProduct: PropTypes.func, useProductGraphTallyQuery: PropTypes.func @@ -95,12 +109,13 @@ GraphCardChart.propTypes = { /** * Default props. * - * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function, - * t: translate, useGetMetrics: Function}} + * @type {{useGraphCardContext: Function, useProduct: Function, useProductGraphTallyQuery: Function, t: translate, + * useGetMetrics: Function, useGraphCardActions: Function}} */ GraphCardChart.defaultProps = { t: translate, useGetMetrics, + useGraphCardActions, useGraphCardContext, useProduct, useProductGraphTallyQuery diff --git a/src/components/graphCard/graphCardContext.js b/src/components/graphCard/graphCardContext.js index 1f3038c50..c6e73e7a1 100644 --- a/src/components/graphCard/graphCardContext.js +++ b/src/components/graphCard/graphCardContext.js @@ -1,7 +1,9 @@ import React, { useContext, useMemo } from 'react'; import { useShallowCompareEffect } from 'react-use'; +import { ToolbarItem } from '@patternfly/react-core'; import { reduxActions, storeHooks } from '../../redux'; import { useProduct, useProductGraphConfig, useProductGraphTallyQuery } from '../productView/productViewContext'; +import { toolbarFieldOptions } from '../toolbar/toolbarFieldSelectCategory'; import { helpers } from '../../common/helpers'; import { graphCardHelpers } from './graphCardHelpers'; @@ -145,10 +147,54 @@ const useGetMetrics = ({ return response; }; +/** + * Return a component list for a configurable graphCard action toolbar. + * Allow the "content" prop to receive graph data for display via callback. + * + * @param {object} params + * @param {Array} params.categoryOptions + * @param {Function} params.useMetricsSelector + * @param {Function} params.useGraphCardContext + * @returns {*[]} + */ +const useGraphCardActions = ({ + categoryOptions = toolbarFieldOptions, + useMetricsSelector: useAliasMetricsSelector = useMetricsSelector, + useGraphCardContext: useAliasGraphCardContext = useGraphCardContext +} = {}) => { + const { pending, dataSets } = useAliasMetricsSelector(); + const { settings = {} } = useAliasGraphCardContext(); + const { actions } = settings; + + return useMemo( + () => + actions?.map(({ id, content, ...actionProps }) => { + const option = categoryOptions.find(({ value: categoryOptionValue }) => id === categoryOptionValue); + const { component: OptionComponent } = option || {}; + + return ( + (OptionComponent && ( + + + + )) || + (content && !pending && dataSets.length && ( + + {typeof content === 'function' ? content({ data: dataSets }) : content} + + )) || + null + ); + }), + [actions, categoryOptions, dataSets, pending] + ); +}; + const context = { GraphCardContext, DEFAULT_CONTEXT, useGetMetrics, + useGraphCardActions, useGraphCardContext, useMetricsSelector, useParseFiltersSettings @@ -160,6 +206,7 @@ export { GraphCardContext, DEFAULT_CONTEXT, useGetMetrics, + useGraphCardActions, useGraphCardContext, useMetricsSelector, useParseFiltersSettings diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js index 99fed8993..ef8172530 100644 --- a/src/components/graphCard/graphCardHelpers.js +++ b/src/components/graphCard/graphCardHelpers.js @@ -46,7 +46,7 @@ const generateChartSettings = ({ filters = [], settings: graphCardSettings = {}, const standaloneFiltersSettings = []; const groupedFiltersSettings = []; - filters.forEach(({ metric, isStandalone = false, ...filterSettings }) => { + filters.forEach(({ metric, isStandalone = false, actions, ...filterSettings }) => { if (!metric) { return; } @@ -80,6 +80,7 @@ const generateChartSettings = ({ filters = [], settings: graphCardSettings = {}, top: 45 }, ...graphCardSettings, + actions, isStandalone: true, metric: { ...baseFilterSettings, diff --git a/src/components/productView/__tests__/__snapshots__/productView.test.js.snap b/src/components/productView/__tests__/__snapshots__/productView.test.js.snap index dd425b5a2..f3124822a 100644 --- a/src/components/productView/__tests__/__snapshots__/productView.test.js.snap +++ b/src/components/productView/__tests__/__snapshots__/productView.test.js.snap @@ -51,7 +51,7 @@ exports[`ProductView Component should allow custom inventory displays via config useSelectCategoryOptions={[Function]} useToolbarFieldClear={[Function]} useToolbarFieldClearAll={[Function]} - useToolbarSecondaryFields={[Function]} + useToolbarFields={[Function]} /> { initialSubscriptionsInventorySettings: { sit: 'amet' }, - initialToolbarFilters: [{ ipsum: 'dolor' }], - initialSecondaryToolbarFilters: [{ hello: 'world' }], + initialToolbarFilters: [{ ipsum: 'dolor' }, { hello: 'world' }], initialToolbarSettings: { ipsum: 'dolor' } diff --git a/src/components/productView/productViewContext.js b/src/components/productView/productViewContext.js index fce7e1edb..91ee6d931 100644 --- a/src/components/productView/productViewContext.js +++ b/src/components/productView/productViewContext.js @@ -350,14 +350,9 @@ const useProductInventorySubscriptionsConfig = ({ * @returns {{settings: object, filters: Array}} */ const useProductToolbarConfig = ({ useProductContext: useAliasProductContext = useProductContext } = {}) => { - const { - initialToolbarFilters, - initialToolbarSettings = {}, - initialSecondaryToolbarFilters - } = useAliasProductContext(); + const { initialToolbarFilters, initialToolbarSettings = {} } = useAliasProductContext(); return { filters: initialToolbarFilters, - secondaryFilters: initialSecondaryToolbarFilters, settings: initialToolbarSettings }; }; diff --git a/src/components/router/__tests__/__snapshots__/redirect.test.js.snap b/src/components/router/__tests__/__snapshots__/redirect.test.js.snap index 150bb7d91..6138b1cb5 100644 --- a/src/components/router/__tests__/__snapshots__/redirect.test.js.snap +++ b/src/components/router/__tests__/__snapshots__/redirect.test.js.snap @@ -65,6 +65,16 @@ exports[`Redirect Component should handle existing routes: existing route 1`] = }, ], "initialGraphSettings": { + "actions": [ + { + "id": "uom", + "position": "right", + }, + { + "id": "granularity", + "position": "right", + }, + ], "isCardTitleDescription": true, }, "initialGuestsFilters": [ @@ -113,14 +123,6 @@ exports[`Redirect Component should handle existing routes: existing route 1`] = ], "initialInventorySettings": {}, "initialOption": "cores", - "initialSecondaryToolbarFilters": [ - { - "id": "uom", - }, - { - "id": "granularity", - }, - ], "initialSubscriptionsInventoryFilters": [ { "id": "product_name", @@ -198,7 +200,15 @@ exports[`Redirect Component should handle existing routes: existing route 1`] = }, ], "initialGraphSettings": { - "actionDisplay": [Function], + "actions": [ + { + "content": [Function], + }, + { + "id": "rangedMonthly", + "position": "right", + }, + ], "isCardTitleDescription": true, }, "initialInventoryFilters": [ @@ -222,11 +232,6 @@ exports[`Redirect Component should handle existing routes: existing route 1`] = "isWrappable": true, }, ], - "initialSecondaryToolbarFilters": [ - { - "id": "rangedMonthly", - }, - ], "initialToolbarFilters": undefined, "inventoryHostsQuery": { "dir": "desc", @@ -299,7 +304,15 @@ exports[`Redirect Component should render a basic component: basic 1`] = ` }, ], "initialGraphSettings": { - "actionDisplay": [Function], + "actions": [ + { + "content": [Function], + }, + { + "id": "rangedMonthly", + "position": "right", + }, + ], "isCardTitleDescription": true, }, "initialInventoryFilters": [ @@ -330,11 +343,6 @@ exports[`Redirect Component should render a basic component: basic 1`] = ` "isWrappable": true, }, ], - "initialSecondaryToolbarFilters": [ - { - "id": "rangedMonthly", - }, - ], "initialToolbarFilters": undefined, "inventoryHostsQuery": { "dir": "desc", diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap index 98a39fc38..0167fc412 100644 --- a/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap +++ b/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap @@ -38,12 +38,16 @@ exports[`Toolbar Component should handle displaying secondary components, fields + + @@ -185,12 +193,16 @@ exports[`Toolbar Component should render a basic component: basic 1`] = ` + @@ -226,12 +238,16 @@ exports[`Toolbar Component should return an empty render when disabled or missin variant="filter-group" /> + - - , -] +{ + "itemFields": [], + "secondaryFields": [ + + + , + ], +} `; exports[`ToolbarContext should return specific properties: specific properties 1`] = ` { "useToolbarFieldClear": [Function], "useToolbarFieldClearAll": [Function], - "useToolbarSecondaryFields": [Function], + "useToolbarFields": [Function], } `; diff --git a/src/components/toolbar/__tests__/toolbar.test.js b/src/components/toolbar/__tests__/toolbar.test.js index 6fe19de47..e02fac015 100644 --- a/src/components/toolbar/__tests__/toolbar.test.js +++ b/src/components/toolbar/__tests__/toolbar.test.js @@ -26,12 +26,12 @@ describe('Toolbar Component', () => { component.setProps({ isDisabled: false, useSelectCategoryOptions: () => ({ options: [] }), - useToolbarSecondaryFields: () => [] + useToolbarFields: () => ({ itemFields: [], secondaryFields: [] }) }); expect(component).toMatchSnapshot('missing filters'); component.setProps({ - useToolbarSecondaryFields: () => [lorem ipsum] + useToolbarFields: () => ({ itemFields: [], secondaryFields: [lorem ipsum] }) }); expect(component).toMatchSnapshot('missing primary, has secondary filters'); }); @@ -64,7 +64,7 @@ describe('Toolbar Component', () => { it('should handle displaying secondary components, fields', () => { const props = { useSelectCategoryOptions: () => ({ options: [selectCategoryOptions[4]] }), - useToolbarSecondaryFields: () => [lorem ipsum] + useToolbarFields: () => ({ itemFields: [], secondaryFields: [lorem ipsum] }) }; const component = shallow(); diff --git a/src/components/toolbar/__tests__/toolbarContext.test.js b/src/components/toolbar/__tests__/toolbarContext.test.js index b86c5d55b..71b318a7e 100644 --- a/src/components/toolbar/__tests__/toolbarContext.test.js +++ b/src/components/toolbar/__tests__/toolbarContext.test.js @@ -1,4 +1,4 @@ -import { context, useToolbarFieldClear, useToolbarFieldClearAll, useToolbarSecondaryFields } from '../toolbarContext'; +import { context, useToolbarFieldClear, useToolbarFieldClearAll, useToolbarFields } from '../toolbarContext'; import { store } from '../../../redux/store'; import { RHSM_API_QUERY_SET_TYPES as RHSM_API_QUERY_TYPES } from '../../../services/rhsm/rhsmConstants'; @@ -21,11 +21,17 @@ describe('ToolbarContext', () => { const { result: onClearField } = shallowHook(() => useToolbarFieldClear()); onClearField('lorem'); + onClearField(RHSM_API_QUERY_TYPES.ARCHITECTURE); + + onClearField(RHSM_API_QUERY_TYPES.BILLING_PROVIDER); + + onClearField(RHSM_API_QUERY_TYPES.CATEGORY); + onClearField(RHSM_API_QUERY_TYPES.SLA); onClearField(RHSM_API_QUERY_TYPES.USAGE); - onClearField(RHSM_API_QUERY_TYPES.BILLING_PROVIDER); + onClearField(RHSM_API_QUERY_TYPES.VARIANT); expect(mockDispatch.mock.calls).toMatchSnapshot('clear single field'); }); @@ -35,10 +41,13 @@ describe('ToolbarContext', () => { useToolbarFieldClearAll({ useProductQuery: () => ({ lorem: 'ipsum', + [RHSM_API_QUERY_TYPES.ARCHITECTURE]: 'testArchitecture', [RHSM_API_QUERY_TYPES.BILLING_PROVIDER]: 'testBillingProvider', + [RHSM_API_QUERY_TYPES.CATEGORY]: 'testCategory', [RHSM_API_QUERY_TYPES.SLA]: 'testSla', [RHSM_API_QUERY_TYPES.USAGE]: 'testUsage', - [RHSM_API_QUERY_TYPES.UOM]: 'testUom' + [RHSM_API_QUERY_TYPES.UOM]: 'testUom', + [RHSM_API_QUERY_TYPES.VARIANT]: 'testVariant' }) }) ); @@ -52,11 +61,12 @@ describe('ToolbarContext', () => { it('should apply a hook for retrieving secondary toolbar field components', () => { const { result: secondaryFields } = shallowHook(() => - useToolbarSecondaryFields({ + useToolbarFields({ useProductToolbarConfig: () => ({ - secondaryFilters: [ + filters: [ { - id: 'rangedMonthly' + id: 'rangedMonthly', + isSecondary: true } ] }) diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js index f91096714..c0bc868c5 100644 --- a/src/components/toolbar/toolbar.js +++ b/src/components/toolbar/toolbar.js @@ -10,7 +10,7 @@ import { } from '@patternfly/react-core'; import { FilterIcon } from '@patternfly/react-icons'; import { useProductToolbarQuery } from '../productView/productViewContext'; -import { useToolbarFieldClear, useToolbarFieldClearAll, useToolbarSecondaryFields } from './toolbarContext'; +import { useToolbarFieldClear, useToolbarFieldClearAll, useToolbarFields } from './toolbarContext'; import { ToolbarFieldSelectCategory, useSelectCategoryOptions } from './toolbarFieldSelectCategory'; import { helpers } from '../../common'; import { translate } from '../i18n/i18n'; @@ -28,7 +28,7 @@ import { translate } from '../i18n/i18n'; * @param {Function} props.useSelectCategoryOptions * @param {Function} props.useToolbarFieldClear * @param {Function} props.useToolbarFieldClearAll - * @param {Function} props.useToolbarSecondaryFields + * @param {Function} props.useToolbarFields * @returns {Node} */ const Toolbar = ({ @@ -39,13 +39,13 @@ const Toolbar = ({ useSelectCategoryOptions: useAliasSelectCategoryOptions, useToolbarFieldClear: useAliasToolbarFieldClear, useToolbarFieldClearAll: useAliasToolbarFieldClearAll, - useToolbarSecondaryFields: useAliasToolbarSecondaryFields + useToolbarFields: useAliasToolbarFields }) => { const toolbarFieldQueries = useAliasProductToolbarQuery(); const { currentCategory, options } = useAliasSelectCategoryOptions(); const clearField = useAliasToolbarFieldClear(); const clearAllFields = useAliasToolbarFieldClearAll(); - const secondaryFields = useAliasToolbarSecondaryFields(); + const { itemFields, secondaryFields } = useAliasToolbarFields(); if (isDisabled || (!options?.length && !secondaryFields?.length)) { return null; @@ -122,7 +122,10 @@ const Toolbar = ({ })} - {secondaryFields} + {itemFields} + + {secondaryFields} + ); @@ -132,7 +135,7 @@ const Toolbar = ({ * Prop types * * @type {{useToolbarFieldClear: Function, t: Function, useSelectCategoryOptions: Function, hardFilterReset: boolean, - * useToolbarSecondaryFields: Function, useProductToolbarQuery: Function, isDisabled: boolean, + * useToolbarFields: Function, useProductToolbarQuery: Function, isDisabled: boolean, * useToolbarFieldClearAll: Function}} */ Toolbar.propTypes = { @@ -143,14 +146,14 @@ Toolbar.propTypes = { useSelectCategoryOptions: PropTypes.func, useToolbarFieldClear: PropTypes.func, useToolbarFieldClearAll: PropTypes.func, - useToolbarSecondaryFields: PropTypes.func + useToolbarFields: PropTypes.func }; /** * Default props. * * @type {{useToolbarFieldClear: Function, t: Function, useSelectCategoryOptions: Function, hardFilterReset: boolean, - * useToolbarSecondaryFields: Function, useProductToolbarQuery: Function, isDisabled: boolean, + * useToolbarFields: Function, useProductToolbarQuery: Function, isDisabled: boolean, * useToolbarFieldClearAll: Function}} */ Toolbar.defaultProps = { @@ -161,7 +164,7 @@ Toolbar.defaultProps = { useSelectCategoryOptions, useToolbarFieldClear, useToolbarFieldClearAll, - useToolbarSecondaryFields + useToolbarFields }; export { Toolbar as default, Toolbar }; diff --git a/src/components/toolbar/toolbarContext.js b/src/components/toolbar/toolbarContext.js index f608f9bab..fa363b6a6 100644 --- a/src/components/toolbar/toolbarContext.js +++ b/src/components/toolbar/toolbarContext.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { ToolbarItem } from '@patternfly/react-core'; import { useProductQuery, useProductToolbarConfig } from '../productView/productViewContext'; import { RHSM_API_QUERY_SET_TYPES } from '../../services/rhsm/rhsmConstants'; @@ -9,7 +9,6 @@ import { useOnSelect as useCategoryOnSelect } from './toolbarFieldCategory'; import { useOnSelect as useSlaOnSelect } from './toolbarFieldSla'; import { useOnSelect as useUsageOnSelect } from './toolbarFieldUsage'; import { useOnSelect as useVariantOnSelect } from './toolbarFieldVariant'; -import { SelectPosition } from '../form/select'; import { helpers } from '../../common/helpers'; /** @@ -137,38 +136,49 @@ const useToolbarFieldClearAll = ({ }; /** - * Return list of secondary toolbar fields for display. + * Return lists of item and secondary toolbar fields for display. * * @param {object} options * @param {Array} options.categoryOptions * @param {Function} options.useProductToolbarConfig * @returns {Array} */ -const useToolbarSecondaryFields = ({ +const useToolbarFields = ({ categoryOptions = toolbarFieldOptions, useProductToolbarConfig: useAliasProductToolbarConfig = useProductToolbarConfig } = {}) => { - const { secondaryFilters = [] } = useAliasProductToolbarConfig(); - - return secondaryFilters.map(({ id, content }) => { - const option = categoryOptions.find(({ value: categoryOptionValue }) => id === categoryOptionValue); - const { component: OptionComponent } = option || {}; - - return ( - (OptionComponent && ( - - - - )) || {content} || - null - ); - }); + const { filters = [] } = useAliasProductToolbarConfig(); + + return useMemo(() => { + const setFilter = ({ id, content, ...filterProps }) => { + const option = categoryOptions.find(({ value: categoryOptionValue }) => id === categoryOptionValue); + const { component: OptionComponent } = option || {}; + + return ( + (OptionComponent && ( + + + + )) || ( + + {typeof content === 'function' ? content() : content} + + ) || + null + ); + }; + + return { + itemFields: filters.filter(({ isItem }) => isItem === true).map(setFilter), + secondaryFields: filters.filter(({ isSecondary }) => isSecondary === true).map(setFilter) + }; + }, [categoryOptions, filters]); }; const context = { useToolbarFieldClear, useToolbarFieldClearAll, - useToolbarSecondaryFields + useToolbarFields }; -export { context as default, context, useToolbarFieldClear, useToolbarFieldClearAll, useToolbarSecondaryFields }; +export { context as default, context, useToolbarFieldClear, useToolbarFieldClearAll, useToolbarFields }; diff --git a/src/components/toolbar/toolbarFieldSelectCategory.js b/src/components/toolbar/toolbarFieldSelectCategory.js index e1b73cd0f..aadc0aa49 100644 --- a/src/components/toolbar/toolbarFieldSelectCategory.js +++ b/src/components/toolbar/toolbarFieldSelectCategory.js @@ -161,18 +161,20 @@ const useSelectCategoryOptions = ({ let initialValue; - const updatedOptions = filters.map(({ id, selected }) => { - const option = categoryOptions.find(({ value }) => id === value); + const updatedOptions = filters + .filter(({ isItem, isSecondary }) => !isItem && !isSecondary) + .map(({ id, selected }) => { + const option = categoryOptions.find(({ value }) => id === value); - if (updatedValue === undefined && selected) { - initialValue = option.value; - } + if (updatedValue === undefined && selected) { + initialValue = option.value; + } - return { - ...option, - selected: (updatedValue === undefined && selected) || updatedValue === option.value - }; - }); + return { + ...option, + selected: (updatedValue === undefined && selected) || updatedValue === option.value + }; + }); return { currentCategory: updatedValue, diff --git a/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap index 2581d2cff..01084703a 100644 --- a/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.openshiftContainer.test.js.snap @@ -74,6 +74,16 @@ exports[`Product OpenShift Container config should apply graph configuration: fi exports[`Product OpenShift Container config should apply graph configuration: settings 1`] = ` { + "actions": [ + { + "id": "uom", + "position": "right", + }, + { + "id": "granularity", + "position": "right", + }, + ], "isCardTitleDescription": true, } `; diff --git a/src/config/__tests__/__snapshots__/product.openshiftDedicated.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftDedicated.test.js.snap index 45b057047..840f93405 100644 --- a/src/config/__tests__/__snapshots__/product.openshiftDedicated.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.openshiftDedicated.test.js.snap @@ -84,7 +84,15 @@ exports[`Product OpenShift Dedicated config should apply graph configuration: pr exports[`Product OpenShift Dedicated config should apply graph configuration: settings 1`] = ` { - "actionDisplay": [Function], + "actions": [ + { + "content": [Function], + }, + { + "id": "rangedMonthly", + "position": "right", + }, + ], "isCardTitleDescription": true, } `; diff --git a/src/config/__tests__/__snapshots__/product.openshiftMetrics.test.js.snap b/src/config/__tests__/__snapshots__/product.openshiftMetrics.test.js.snap index d401164b8..ca05767f0 100644 --- a/src/config/__tests__/__snapshots__/product.openshiftMetrics.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.openshiftMetrics.test.js.snap @@ -68,7 +68,15 @@ exports[`Product OpenShift Metrics config should apply graph configuration: prod exports[`Product OpenShift Metrics config should apply graph configuration: settings 1`] = ` { - "actionDisplay": [Function], + "actions": [ + { + "content": [Function], + }, + { + "id": "rangedMonthly", + "position": "right", + }, + ], "isCardTitleDescription": true, } `; diff --git a/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap b/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap index 78936011a..1ddfad949 100644 --- a/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.rhacs.test.js.snap @@ -135,6 +135,7 @@ exports[`Product RHACS config should apply graph configuration: filters 1`] = ` "standaloneFiltersSettings": [ { "settings": { + "actions": undefined, "isStandalone": true, "metric": { "chartType": "line", diff --git a/src/config/__tests__/__snapshots__/product.rhel.test.js.snap b/src/config/__tests__/__snapshots__/product.rhel.test.js.snap index 942f787fc..8fcdab9f8 100644 --- a/src/config/__tests__/__snapshots__/product.rhel.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.rhel.test.js.snap @@ -78,7 +78,16 @@ exports[`Product RHEL config should apply graph configuration: filters 1`] = ` } `; -exports[`Product RHEL config should apply graph configuration: settings 1`] = `{}`; +exports[`Product RHEL config should apply graph configuration: settings 1`] = ` +{ + "actions": [ + { + "id": "granularity", + "position": "right", + }, + ], +} +`; exports[`Product RHEL config should apply guest inventory configuration: filtered 1`] = ` { diff --git a/src/config/__tests__/__snapshots__/product.rhods.test.js.snap b/src/config/__tests__/__snapshots__/product.rhods.test.js.snap index cfb002cda..a66fa2709 100644 --- a/src/config/__tests__/__snapshots__/product.rhods.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.rhods.test.js.snap @@ -135,6 +135,7 @@ exports[`Product RHODS config should apply graph configuration: filters 1`] = ` "standaloneFiltersSettings": [ { "settings": { + "actions": undefined, "isStandalone": true, "metric": { "chartType": "line", diff --git a/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap b/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap index b9476c70c..8180dcd51 100644 --- a/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.rhosak.test.js.snap @@ -227,6 +227,7 @@ exports[`Product RHOSAK config should apply graph configuration: filters 1`] = ` "standaloneFiltersSettings": [ { "settings": { + "actions": undefined, "isStandalone": true, "metric": { "chartType": "line", @@ -270,6 +271,7 @@ exports[`Product RHOSAK config should apply graph configuration: filters 1`] = ` }, { "settings": { + "actions": undefined, "isStandalone": true, "metric": { "chartType": "line", @@ -313,6 +315,7 @@ exports[`Product RHOSAK config should apply graph configuration: filters 1`] = ` }, { "settings": { + "actions": undefined, "isStandalone": true, "metric": { "chartType": "line", diff --git a/src/config/__tests__/__snapshots__/product.satellite.test.js.snap b/src/config/__tests__/__snapshots__/product.satellite.test.js.snap index feb0b245f..b706fd6c6 100644 --- a/src/config/__tests__/__snapshots__/product.satellite.test.js.snap +++ b/src/config/__tests__/__snapshots__/product.satellite.test.js.snap @@ -65,7 +65,16 @@ exports[`Product Satellite config should apply graph configuration: filters 1`] } `; -exports[`Product Satellite config should apply graph configuration: settings 1`] = `{}`; +exports[`Product Satellite config should apply graph configuration: settings 1`] = ` +{ + "actions": [ + { + "id": "granularity", + "position": "right", + }, + ], +} +`; exports[`Product Satellite config should apply guest inventory configuration: filtered 1`] = ` { diff --git a/src/config/__tests__/product.openshiftDedicated.test.js b/src/config/__tests__/product.openshiftDedicated.test.js index 23e555456..e707e8466 100644 --- a/src/config/__tests__/product.openshiftDedicated.test.js +++ b/src/config/__tests__/product.openshiftDedicated.test.js @@ -16,7 +16,7 @@ describe('Product OpenShift Dedicated config', () => { expect(initialGraphSettings).toMatchSnapshot('settings'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: RHSM_API_PATH_METRIC_TYPES.CORES, productId: 'Ipsum' }), @@ -41,7 +41,7 @@ describe('Product OpenShift Dedicated config', () => { }).toMatchSnapshot('product action display should display a total value below 1000'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: RHSM_API_PATH_METRIC_TYPES.CORES, productId: 'Ipsum' }), @@ -66,7 +66,7 @@ describe('Product OpenShift Dedicated config', () => { }).toMatchSnapshot('product action display should display a total value below 1000000'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: RHSM_API_PATH_METRIC_TYPES.CORES, productId: 'Ipsum' }), @@ -91,7 +91,7 @@ describe('Product OpenShift Dedicated config', () => { }).toMatchSnapshot('product action display should display a total value'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: 'loremIpsum', productId: 'Ipsum' }), diff --git a/src/config/__tests__/product.openshiftMetrics.test.js b/src/config/__tests__/product.openshiftMetrics.test.js index c6cfa2177..0bccd8b50 100644 --- a/src/config/__tests__/product.openshiftMetrics.test.js +++ b/src/config/__tests__/product.openshiftMetrics.test.js @@ -16,7 +16,7 @@ describe('Product OpenShift Metrics config', () => { expect(initialGraphSettings).toMatchSnapshot('settings'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: RHSM_API_PATH_METRIC_TYPES.CORES, productId: 'Ipsum' }), @@ -41,7 +41,7 @@ describe('Product OpenShift Metrics config', () => { }).toMatchSnapshot('product action display should display a total value below 1000'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: RHSM_API_PATH_METRIC_TYPES.CORES, productId: 'Ipsum' }), @@ -66,7 +66,7 @@ describe('Product OpenShift Metrics config', () => { }).toMatchSnapshot('product action display should display a total value below 1000000'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: RHSM_API_PATH_METRIC_TYPES.CORES, productId: 'Ipsum' }), @@ -91,7 +91,7 @@ describe('Product OpenShift Metrics config', () => { }).toMatchSnapshot('product action display should display a total value'); expect({ - productActionDisplay: initialGraphSettings.actionDisplay({ + productActionDisplay: initialGraphSettings.actions[0].content({ data: [ { id: generateChartIds({ isCapacity: false, metric: 'loremIpsum', productId: 'Ipsum' }), diff --git a/src/config/product.openshiftContainer.js b/src/config/product.openshiftContainer.js index 56a44fb57..a6c002d3a 100644 --- a/src/config/product.openshiftContainer.js +++ b/src/config/product.openshiftContainer.js @@ -23,6 +23,7 @@ import { dateHelpers, helpers } from '../common'; import { Tooltip } from '../components/tooltip/tooltip'; import { ChartTypeVariant } from '../components/chart/chart'; import { ChartIcon } from '../components/chart/chartIcon'; +import { SelectPosition } from '../components/form/select'; import { translate } from '../components/i18n/i18n'; // ToDo: evaluate the need for "productLabel" or using productId @@ -90,7 +91,17 @@ const config = { } ], initialGraphSettings: { - isCardTitleDescription: true + isCardTitleDescription: true, + actions: [ + { + id: RHSM_API_QUERY_SET_TYPES.UOM, + position: SelectPosition.right + }, + { + id: RHSM_API_QUERY_SET_TYPES.GRANULARITY, + position: SelectPosition.right + } + ] }, initialGuestsFilters: [ { @@ -256,14 +267,6 @@ const config = { { id: RHSM_API_QUERY_SET_TYPES.SLA } - ], - initialSecondaryToolbarFilters: [ - { - id: RHSM_API_QUERY_SET_TYPES.UOM - }, - { - id: RHSM_API_QUERY_SET_TYPES.GRANULARITY - } ] }; diff --git a/src/config/product.openshiftDedicated.js b/src/config/product.openshiftDedicated.js index b78d99265..2552ad89c 100644 --- a/src/config/product.openshiftDedicated.js +++ b/src/config/product.openshiftDedicated.js @@ -19,6 +19,7 @@ import { } from '../services/rhsm/rhsmConstants'; import { ChartTypeVariant } from '../components/chart/chart'; import { dateHelpers, helpers } from '../common'; +import { SelectPosition } from '../components/form/select'; import { translate } from '../components/i18n/i18n'; const productGroup = RHSM_API_PATH_PRODUCT_TYPES.OPENSHIFT_DEDICATED_METRICS; @@ -68,23 +69,31 @@ const config = { ], initialGraphSettings: { isCardTitleDescription: true, - actionDisplay: ({ data = [] } = {}) => { - const { id, meta = {} } = data.find(({ metric }) => metric === RHSM_API_PATH_METRIC_TYPES.CORES) || {}; - const { totalMonthlyValue } = meta; - let displayContent; + actions: [ + { + content: ({ data = [] } = {}) => { + const { id, meta = {} } = data.find(({ metric }) => metric === RHSM_API_PATH_METRIC_TYPES.CORES) || {}; + const { totalMonthlyValue } = meta; + let displayContent; - if (totalMonthlyValue) { - displayContent = translate('curiosity-graph.cardActionTotal', { - context: id, - total: helpers - .numberDisplay(totalMonthlyValue) - ?.format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) - ?.toUpperCase() - }); - } + if (totalMonthlyValue) { + displayContent = translate('curiosity-graph.cardActionTotal', { + context: id, + total: helpers + .numberDisplay(totalMonthlyValue) + ?.format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) + ?.toUpperCase() + }); + } - return
{displayContent || null}
; - } + return
{displayContent || null}
; + } + }, + { + id: 'rangedMonthly', + position: SelectPosition.right + } + ] }, initialInventoryFilters: [ { @@ -140,12 +149,7 @@ const config = { cellWidth: 15 } ], - initialToolbarFilters: undefined, - initialSecondaryToolbarFilters: [ - { - id: 'rangedMonthly' - } - ] + initialToolbarFilters: undefined }; export { config as default, config, productGroup, productId }; diff --git a/src/config/product.openshiftMetrics.js b/src/config/product.openshiftMetrics.js index 754a39cbe..df9f04b9c 100644 --- a/src/config/product.openshiftMetrics.js +++ b/src/config/product.openshiftMetrics.js @@ -16,6 +16,7 @@ import { RHSM_INTERNAL_PRODUCT_DISPLAY_TYPES as DISPLAY_TYPES } from '../services/rhsm/rhsmConstants'; import { dateHelpers, helpers } from '../common'; +import { SelectPosition } from '../components/form/select'; import { translate } from '../components/i18n/i18n'; // ToDo: evaluate the need for "productLabel" or using productId @@ -56,23 +57,31 @@ const config = { ], initialGraphSettings: { isCardTitleDescription: true, - actionDisplay: ({ data = [] } = {}) => { - const { id, meta = {} } = data.find(({ metric }) => metric === RHSM_API_PATH_METRIC_TYPES.CORES) || {}; - const { totalMonthlyValue } = meta; - let displayContent; + actions: [ + { + content: ({ data = [] } = {}) => { + const { id, meta = {} } = data.find(({ metric }) => metric === RHSM_API_PATH_METRIC_TYPES.CORES) || {}; + const { totalMonthlyValue } = meta; + let displayContent; - if (totalMonthlyValue) { - displayContent = translate('curiosity-graph.cardActionTotal', { - context: id, - total: helpers - .numberDisplay(totalMonthlyValue) - ?.format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) - ?.toUpperCase() - }); - } + if (totalMonthlyValue) { + displayContent = translate('curiosity-graph.cardActionTotal', { + context: id, + total: helpers + .numberDisplay(totalMonthlyValue) + ?.format({ average: true, mantissa: 2, trimMantissa: true, lowPrecision: false }) + ?.toUpperCase() + }); + } - return
{displayContent || null}
; - } + return
{displayContent || null}
; + } + }, + { + id: 'rangedMonthly', + position: SelectPosition.right + } + ] }, initialInventoryFilters: [ { @@ -118,12 +127,7 @@ const config = { cellWidth: 20 } ], - initialToolbarFilters: undefined, - initialSecondaryToolbarFilters: [ - { - id: 'rangedMonthly' - } - ] + initialToolbarFilters: undefined }; export { config as default, config, productGroup, productId }; diff --git a/src/config/product.rhacs.js b/src/config/product.rhacs.js index 7bb3cfabe..b91f15c7f 100644 --- a/src/config/product.rhacs.js +++ b/src/config/product.rhacs.js @@ -21,6 +21,7 @@ import { } from '../services/rhsm/rhsmConstants'; import { ChartTypeVariant } from '../components/chart/chart'; import { dateHelpers, helpers } from '../common'; +import { SelectPosition } from '../components/form/select'; import { translate, EMPTY_CONTEXT } from '../components/i18n/i18n'; /** @@ -202,11 +203,11 @@ const config = { initialToolbarFilters: [ { id: RHSM_API_QUERY_SET_TYPES.BILLING_PROVIDER - } - ], - initialSecondaryToolbarFilters: [ + }, { - id: 'rangedMonthly' + id: 'rangedMonthly', + isSecondary: true, + position: SelectPosition.right } ] }; diff --git a/src/config/product.rhel.js b/src/config/product.rhel.js index c1f4e365d..ceb7b5004 100644 --- a/src/config/product.rhel.js +++ b/src/config/product.rhel.js @@ -29,6 +29,7 @@ import { dateHelpers, helpers } from '../common'; import { Tooltip } from '../components/tooltip/tooltip'; import { ChartIcon } from '../components/chart/chartIcon'; import { ChartTypeVariant } from '../components/chart/chart'; +import { SelectPosition } from '../components/form/select'; import { translate } from '../components/i18n/i18n'; /** @@ -104,7 +105,14 @@ const config = { chartType: ChartTypeVariant.threshold } ], - initialGraphSettings: {}, + initialGraphSettings: { + actions: [ + { + id: RHSM_API_QUERY_SET_TYPES.GRANULARITY, + position: SelectPosition.right + } + ] + }, initialGuestsFilters: [ { id: 'displayName', @@ -284,11 +292,6 @@ const config = { id: RHSM_API_QUERY_SET_TYPES.USAGE, selected: true } - ], - initialSecondaryToolbarFilters: [ - { - id: RHSM_API_QUERY_SET_TYPES.GRANULARITY - } ] }; diff --git a/src/config/product.rhods.js b/src/config/product.rhods.js index 1208181f3..fdd3665a2 100644 --- a/src/config/product.rhods.js +++ b/src/config/product.rhods.js @@ -21,6 +21,7 @@ import { } from '../services/rhsm/rhsmConstants'; import { ChartTypeVariant } from '../components/chart/chart'; import { dateHelpers, helpers } from '../common'; +import { SelectPosition } from '../components/form/select'; import { translate, EMPTY_CONTEXT } from '../components/i18n/i18n'; const productGroup = RHSM_API_PATH_PRODUCT_TYPES.RHODS; @@ -197,11 +198,11 @@ const config = { initialToolbarFilters: [ { id: RHSM_API_QUERY_SET_TYPES.BILLING_PROVIDER - } - ], - initialSecondaryToolbarFilters: [ + }, { - id: 'rangedMonthly' + id: 'rangedMonthly', + isSecondary: true, + position: SelectPosition.right } ] }; diff --git a/src/config/product.rhosak.js b/src/config/product.rhosak.js index 858454faa..f89cdc2bb 100644 --- a/src/config/product.rhosak.js +++ b/src/config/product.rhosak.js @@ -25,6 +25,7 @@ import { } from '../services/rhsm/rhsmConstants'; import { ChartTypeVariant } from '../components/chart/chart'; import { dateHelpers, helpers } from '../common'; +import { SelectPosition } from '../components/form/select'; import { translate, EMPTY_CONTEXT } from '../components/i18n/i18n'; /** @@ -260,11 +261,11 @@ const config = { initialToolbarFilters: [ { id: RHSM_API_QUERY_SET_TYPES.BILLING_PROVIDER - } - ], - initialSecondaryToolbarFilters: [ + }, { - id: 'rangedMonthly' + id: 'rangedMonthly', + isSecondary: true, + position: SelectPosition.right } ] }; diff --git a/src/config/product.satellite.js b/src/config/product.satellite.js index e2944f952..1df3c0205 100644 --- a/src/config/product.satellite.js +++ b/src/config/product.satellite.js @@ -23,6 +23,7 @@ import { RHSM_INTERNAL_PRODUCT_DISPLAY_TYPES as DISPLAY_TYPES } from '../services/rhsm/rhsmConstants'; import { dateHelpers, helpers } from '../common'; +import { SelectPosition } from '../components/form/select'; import { translate } from '../components/i18n/i18n'; /** @@ -93,7 +94,14 @@ const config = { } } ], - initialGraphSettings: {}, + initialGraphSettings: { + actions: [ + { + id: RHSM_API_QUERY_SET_TYPES.GRANULARITY, + position: SelectPosition.right + } + ] + }, initialGuestsFilters: [ { id: 'displayName', @@ -220,11 +228,6 @@ const config = { id: RHSM_API_QUERY_SET_TYPES.USAGE, selected: true } - ], - initialSecondaryToolbarFilters: [ - { - id: RHSM_API_QUERY_SET_TYPES.GRANULARITY - } ] }; diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss index 90ea0c4a4..07f177d57 100644 --- a/src/styles/_usage-graph.scss +++ b/src/styles/_usage-graph.scss @@ -1,5 +1,15 @@ .curiosity { .curiosity-usage-graph { + .pf-c-toolbar { + padding-bottom: inherit; + padding-top: inherit; + + &__content { + padding-left: inherit; + padding-right: inherit; + } + } + .pf-c-card { &__header { border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100); diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap index 56df899f8..b983e49be 100644 --- a/tests/__snapshots__/dist.test.js.snap +++ b/tests/__snapshots__/dist.test.js.snap @@ -4,30 +4,29 @@ exports[`Build distribution should match a specific file output 1`] = ` [ "", "./dist/css/160*css", - "./dist/css/2085*css", "./dist/css/3557*css", "./dist/css/401*css", "./dist/css/6402*css", + "./dist/css/7864*css", "./dist/css/8485*css", - "./dist/css/895*css", + "./dist/css/8905*css", "./dist/css/9222*css", "./dist/fed-mods.json", "./dist/fonts/graph2x.png", "./dist/fonts/graph4x.png", - "./dist/js/1009*js", "./dist/js/1132*js", "./dist/js/1233*js", "./dist/js/1302*js", "./dist/js/1339*js", "./dist/js/1355*js", "./dist/js/136*js", - "./dist/js/1394*js", "./dist/js/160*js", "./dist/js/1663*js", "./dist/js/1799*js", "./dist/js/1824*js", "./dist/js/1858*js", "./dist/js/2217*js", + "./dist/js/2227*js", "./dist/js/2243*js", "./dist/js/2293*js", "./dist/js/2622*js", @@ -44,11 +43,12 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/3242*js", "./dist/js/3242*txt", "./dist/js/3267*js", + "./dist/js/3280*js", "./dist/js/3396*js", + "./dist/js/353*js", "./dist/js/3557*js", "./dist/js/3597*js", "./dist/js/3722*js", - "./dist/js/3768*js", "./dist/js/384*js", "./dist/js/3914*js", "./dist/js/3935*js", @@ -70,8 +70,8 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/5394*js", "./dist/js/5876*js", "./dist/js/5993*js", + "./dist/js/608*js", "./dist/js/6402*js", - "./dist/js/6476*js", "./dist/js/6706*js", "./dist/js/6706*txt", "./dist/js/6816*js", @@ -82,11 +82,12 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/7297*js", "./dist/js/7585*js", "./dist/js/7745*js", + "./dist/js/7864*js", "./dist/js/8007*js", "./dist/js/8485*js", "./dist/js/8710*js", "./dist/js/8900*js", - "./dist/js/895*js", + "./dist/js/8905*js", "./dist/js/9051*js", "./dist/js/9077*js", "./dist/js/9222*js", @@ -96,25 +97,23 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/js/9517*js", "./dist/js/9669*js", "./dist/js/9669*txt", - "./dist/js/9844*js", "./dist/js/9928*js", "./dist/js/App*js", "./dist/locales/en-US.json", "./dist/locales/en.json", "./dist/locales/locales.json", - "./dist/sourcemaps/1009*map", "./dist/sourcemaps/1233*map", "./dist/sourcemaps/1302*map", "./dist/sourcemaps/1339*map", "./dist/sourcemaps/1355*map", "./dist/sourcemaps/136*map", - "./dist/sourcemaps/1394*map", "./dist/sourcemaps/160*map", "./dist/sourcemaps/1663*map", "./dist/sourcemaps/1799*map", "./dist/sourcemaps/1824*map", "./dist/sourcemaps/1858*map", "./dist/sourcemaps/2217*map", + "./dist/sourcemaps/2227*map", "./dist/sourcemaps/2243*map", "./dist/sourcemaps/2293*map", "./dist/sourcemaps/2622*map", @@ -130,11 +129,12 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/sourcemaps/3128*map", "./dist/sourcemaps/3242*map", "./dist/sourcemaps/3267*map", + "./dist/sourcemaps/3280*map", "./dist/sourcemaps/3396*map", + "./dist/sourcemaps/353*map", "./dist/sourcemaps/3557*map", "./dist/sourcemaps/3597*map", "./dist/sourcemaps/3722*map", - "./dist/sourcemaps/3768*map", "./dist/sourcemaps/384*map", "./dist/sourcemaps/3914*map", "./dist/sourcemaps/3935*map", @@ -152,8 +152,8 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/sourcemaps/5394*map", "./dist/sourcemaps/5876*map", "./dist/sourcemaps/5993*map", + "./dist/sourcemaps/608*map", "./dist/sourcemaps/6402*map", - "./dist/sourcemaps/6476*map", "./dist/sourcemaps/6706*map", "./dist/sourcemaps/6816*map", "./dist/sourcemaps/7235*map", @@ -161,10 +161,11 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/sourcemaps/7294*map", "./dist/sourcemaps/7297*map", "./dist/sourcemaps/7585*map", + "./dist/sourcemaps/7864*map", "./dist/sourcemaps/8485*map", "./dist/sourcemaps/8710*map", "./dist/sourcemaps/8900*map", - "./dist/sourcemaps/895*map", + "./dist/sourcemaps/8905*map", "./dist/sourcemaps/9051*map", "./dist/sourcemaps/9077*map", "./dist/sourcemaps/9222*map", @@ -173,7 +174,6 @@ exports[`Build distribution should match a specific file output 1`] = ` "./dist/sourcemaps/9407*map", "./dist/sourcemaps/9517*map", "./dist/sourcemaps/9669*map", - "./dist/sourcemaps/9844*map", "./dist/sourcemaps/9928*map", "./dist/sourcemaps/App*map", "./dist/subscriptions*js",