From 580f2b7c9d2248251f298d90766838d23beebcf5 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Thu, 28 Sep 2023 16:10:54 -0400 Subject: [PATCH] refactor(deps): sw-1689 pf5 updates (#1194) * bannerMessages, add alert variant export * chartIcon, add icon size export * form, component event callback remaps * graphCard, inventory, optIn, actions to prop * toolbar, align attribute naming * styling, restructure, remove unused * tooltip, adjust distance for new styling * testing, pf5 class name snapshot updates --- config/cspell.config.json | 1 + package.json | 18 +- src/components/README.md | 29 +- .../__snapshots__/authentication.test.js.snap | 217 +++-- .../__snapshots__/bannerMessages.test.js.snap | 26 +- .../bannerMessages/bannerMessages.js | 12 +- .../__snapshots__/chartElements.test.js.snap | 538 +++++------ .../__snapshots__/chartIcon.test.js.snap | 16 +- .../chart/__tests__/chartElements.test.js | 4 +- src/components/chart/chartIcon.js | 19 +- .../__snapshots__/checkbox.test.js.snap | 38 +- .../__snapshots__/select.test.js.snap | 112 +-- .../__snapshots__/textInput.test.js.snap | 110 +-- src/components/form/__tests__/select.test.js | 12 +- src/components/form/checkbox.js | 2 +- src/components/form/select.js | 28 +- src/components/form/textInput.js | 6 +- .../__snapshots__/graphCardChart.test.js.snap | 56 +- .../graphCardChartLegend.test.js.snap | 25 +- .../graphCardChartTitleTooltip.test.js.snap | 7 +- .../graphCardChartTooltip.test.js.snap | 14 +- .../graphCardMetricTotals.test.js.snap | 182 ++-- .../__tests__/graphCardChartLegend.test.js | 2 +- src/components/graphCard/graphCardChart.js | 33 +- .../graphCard/graphCardChartLegend.js | 7 +- .../graphCard/graphCardChartTitleTooltip.js | 1 - .../graphCard/graphCardChartTooltip.js | 3 +- .../graphCard/graphCardMetricTotals.js | 20 +- .../__tests__/__snapshots__/i18n.test.js.snap | 2 +- .../__snapshots__/inventoryCard.test.js.snap | 320 +++---- src/components/inventoryCard/inventoryCard.js | 68 +- .../__tests__/inventoryTabs.test.js | 2 +- .../__snapshots__/optinView.test.js.snap | 165 ++-- src/components/optinView/optinView.js | 25 +- .../__snapshots__/pageHeader.test.js.snap | 12 +- .../__snapshots__/pageLayout.test.js.snap | 8 +- .../__snapshots__/pagination.test.js.snap | 56 +- .../pagination/__tests__/pagination.test.js | 4 +- .../__snapshots__/productView.test.js.snap | 18 +- .../productViewMissing.test.js.snap | 12 +- src/components/productView/productView.js | 2 +- .../productView/productViewMissing.js | 3 + .../__snapshots__/table.test.js.snap | 334 +++---- .../__snapshots__/tableEmpty.test.js.snap | 20 +- src/components/table/__tests__/table.test.js | 12 +- src/components/table/table.js | 6 +- src/components/table/tableEmpty.js | 14 +- .../__tests__/__snapshots__/tabs.test.js.snap | 40 +- .../__snapshots__/toolbar.test.js.snap | 119 ++- .../toolbarFieldDisplayName.test.js.snap | 38 +- .../toolbarFieldGroupVariant.test.js.snap | 2 + .../toolbarFieldSelectCategory.test.js.snap | 8 +- .../__snapshots__/toolbarFilter.test.js.snap | 2 +- .../toolbar/__tests__/toolbar.test.js | 4 +- .../toolbarFieldBillingProvider.test.js | 2 +- .../__tests__/toolbarFieldCategory.test.js | 2 +- .../__tests__/toolbarFieldGranularity.test.js | 2 +- .../toolbarFieldGroupVariant.test.js | 2 +- .../toolbarFieldRangedMonthly.test.js | 2 +- .../toolbarFieldSelectCategory.test.js | 2 +- .../toolbar/__tests__/toolbarFieldSla.test.js | 2 +- .../toolbar/__tests__/toolbarFieldUom.test.js | 2 +- .../__tests__/toolbarFieldUsage.test.js | 2 +- src/components/toolbar/toolbar.js | 4 +- .../toolbar/toolbarFieldDisplayName.js | 27 +- .../toolbar/toolbarFieldGroupVariant.js | 2 +- .../__snapshots__/tooltip.test.js.snap | 16 +- src/components/tooltip/tooltip.js | 2 +- .../__snapshots__/product.config.test.js.snap | 16 +- src/config/product.openshiftContainer.js | 2 +- src/config/product.rhel.js | 2 +- src/styles/_card.scss | 20 + src/styles/_graph.scss | 253 ++++++ src/styles/{_icons.scss => _icon.scss} | 17 +- src/styles/_inventory-list.scss | 114 --- src/styles/_inventory.scss | 51 ++ src/styles/_optin.scss | 17 - src/styles/_page-layout.scss | 16 +- src/styles/_product-view.scss | 15 +- src/styles/{_form.scss => _select.scss} | 16 +- src/styles/_table.scss | 23 +- src/styles/_tabs.scss | 23 +- src/styles/_toolbar.scss | 64 +- src/styles/_usage-graph.scss | 343 ------- src/styles/index.scss | 60 +- src/styles/standalone.scss | 4 +- tests/__snapshots__/dist.test.js.snap | 80 +- yarn.lock | 836 ++++++------------ 88 files changed, 2290 insertions(+), 2585 deletions(-) create mode 100644 src/styles/_card.scss create mode 100644 src/styles/_graph.scss rename src/styles/{_icons.scss => _icon.scss} (71%) delete mode 100644 src/styles/_inventory-list.scss create mode 100644 src/styles/_inventory.scss rename src/styles/{_form.scss => _select.scss} (52%) delete mode 100644 src/styles/_usage-graph.scss diff --git a/config/cspell.config.json b/config/cspell.config.json index 3ccb0ea2d..4bde0c102 100644 --- a/config/cspell.config.json +++ b/config/cspell.config.json @@ -60,6 +60,7 @@ "select's", "spandx", "timeseries", + "typeahead", "uxui", "voronoi", "wojtekmaj", diff --git a/package.json b/package.json index 08ec6d39e..b50555804 100644 --- a/package.json +++ b/package.json @@ -74,13 +74,13 @@ }, "dependencies": { "@joi/date": "^2.1.0", - "@patternfly/patternfly": "4.224.2", - "@patternfly/react-charts": "6.94.19", - "@patternfly/react-core": "4.276.8", - "@patternfly/react-icons": "4.93.6", - "@patternfly/react-styles": "4.92.6", - "@patternfly/react-table": "4.113.0", - "@patternfly/react-tokens": "4.94.6", + "@patternfly/patternfly": "5.0.4", + "@patternfly/react-charts": "7.0.1", + "@patternfly/react-core": "5.0.1", + "@patternfly/react-icons": "5.0.1", + "@patternfly/react-styles": "5.0.1", + "@patternfly/react-table": "5.0.1", + "@patternfly/react-tokens": "5.0.1", "@redhat-cloud-services/frontend-components": "3.9.36", "@redhat-cloud-services/frontend-components-notifications": "3.2.14", "@redhat-cloud-services/frontend-components-utilities": "3.5.0", @@ -110,8 +110,8 @@ "redux-promise-middleware": "^6.1.3", "redux-thunk": "^2.4.2", "reselect": "^4.1.8", - "victory": "36.6.10", - "victory-create-container": "36.6.10" + "victory": "36.6.11", + "victory-create-container": "36.6.11" }, "devDependencies": { "@babel/core": "7.22.17", diff --git a/src/components/README.md b/src/components/README.md index bf88046c6..218869349 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -349,10 +349,17 @@ Banner alert messages for a product view. * [BannerMessages](#Components.module_BannerMessages) + * [~BannerMessageVariant](#Components.module_BannerMessages..BannerMessageVariant) : Object * [~BannerMessages(props)](#Components.module_BannerMessages..BannerMessages) ⇒ React.ReactNode * [.propTypes](#Components.module_BannerMessages..BannerMessages.propTypes) : Object * [.defaultProps](#Components.module_BannerMessages..BannerMessages.defaultProps) : Object + + +### BannerMessages~BannerMessageVariant : Object +Banner message variants. + +**Kind**: inner constant of [BannerMessages](#Components.module_BannerMessages) ### BannerMessages~BannerMessages(props) ⇒ React.ReactNode @@ -976,11 +983,18 @@ Generate x,y props. ## ChartIcon * [ChartIcon](#Chart.module_ChartIcon) + * [~IconSize](#Chart.module_ChartIcon..IconSize) : Object * [~getSize(size)](#Chart.module_ChartIcon..getSize) ⇒ string * [~ChartIcon(props)](#Chart.module_ChartIcon..ChartIcon) ⇒ React.ReactNode * [.propTypes](#Chart.module_ChartIcon..ChartIcon.propTypes) : Object * [.defaultProps](#Chart.module_ChartIcon..ChartIcon.defaultProps) : Object + + +### ChartIcon~IconSize : Object +Consistent icon sizing. + +**Kind**: inner constant of [ChartIcon](#Chart.module_ChartIcon) ### ChartIcon~getSize(size) ⇒ string @@ -1353,6 +1367,7 @@ A bundled wrapper for PF Select, Dropdown. * [~SelectButtonVariant](#Form.module_Select..SelectButtonVariant) : Object * [~SelectDirection](#Form.module_Select..SelectDirection) : Object * [~SelectPosition](#Form.module_Select..SelectPosition) : Object + * [~SelectVariant](#Form.module_Select..SelectVariant) : Object * [~formatSelectProps](#Form.module_Select..formatSelectProps) ⇒ Object * [~formatButtonProps](#Form.module_Select..formatButtonProps) ⇒ \* * [~formatOptions(params)](#Form.module_Select..formatOptions) ⇒ Object @@ -1397,6 +1412,12 @@ Pass direction as select component variant option. ### Select~SelectPosition : Object Pass position as select component variant option. +**Kind**: inner constant of [Select](#Form.module_Select) + + +### Select~SelectVariant : Object +Pass select variants as a select component variant option. + **Kind**: inner constant of [Select](#Form.module_Select) @@ -1669,7 +1690,7 @@ Text input with state. * [.defaultProps](#Form.module_TextInput..TextInput.defaultProps) : Object * ["onKeyUp" (event)](#event_onKeyUp) * ["onMouseUp" (event)](#event_onMouseUp) - * ["onChange" (value, event)](#event_onChange) + * ["onChange" (event, value)](#event_onChange) @@ -1744,7 +1765,7 @@ onMouseUp event, provide additional functionality for onClear event. -### "onChange" (value, event) +### "onChange" (event, value) onChange event, provide restructured event. **Kind**: event emitted by [TextInput](#Form.module_TextInput) @@ -1756,9 +1777,9 @@ onChange event, provide restructured event. - valuestring - eventobject + + valuestring diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap index 64f810442..375906afc 100644 --- a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap +++ b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap @@ -100,9 +100,9 @@ exports[`Authentication Component should render a component pending: pending 1`] exports[`Authentication Component should return a message on 401 error: 401 error 1`] = `
You do not have access to Subscriptions @@ -150,15 +150,15 @@ exports[`Authentication Component should return a redirect on a specific 403 err widget-type="InsightsPageHeader" >

@@ -168,42 +168,45 @@ exports[`Authentication Component should return a redirect on a specific 403 err

- + +
You do not have access to Subscriptions
Contact your organization administrator(s) for more information or visit  @@ -248,114 +251,130 @@ exports[`Authentication Component should return a redirect on a specific 403 err }" >
-
-

- t(curiosity-optin.cardTitle, {"appName":"Subscriptions"}) -

+

+ t(curiosity-optin.cardTitle, {"appName":"Subscriptions"}) +

+
t(curiosity-optin.cardDescription, {"appName":"Subscriptions"})
-

- t(curiosity-optin.cardSeeTitle) -

+

+ t(curiosity-optin.cardSeeTitle) +

+
t(curiosity-optin.cardSeeDescription)
-

- t(curiosity-optin.cardReportTitle) -

+

+ t(curiosity-optin.cardReportTitle) +

+
t(curiosity-optin.cardReportDescription)
-

- t(curiosity-optin.cardFilterTitle) -

+

+ t(curiosity-optin.cardFilterTitle) +

+
t(curiosity-optin.cardFilterDescription)
-
-

- t(curiosity-optin.tourTitle) -

+

+ t(curiosity-optin.tourTitle) +

+
t(curiosity-optin.tourDescription)
- +
- +
`; diff --git a/src/components/bannerMessages/__tests__/__snapshots__/bannerMessages.test.js.snap b/src/components/bannerMessages/__tests__/__snapshots__/bannerMessages.test.js.snap index 2b0ed0ed0..f0b3639d8 100644 --- a/src/components/bannerMessages/__tests__/__snapshots__/bannerMessages.test.js.snap +++ b/src/components/bannerMessages/__tests__/__snapshots__/bannerMessages.test.js.snap @@ -20,25 +20,25 @@ exports[`BannerMessages Component should handle closing messages from state: sta

  • Info alert: Lorem ipsum title

    Lorem ipsum message
    diff --git a/src/components/bannerMessages/bannerMessages.js b/src/components/bannerMessages/bannerMessages.js index 3cdb0185b..bd5a53be0 100644 --- a/src/components/bannerMessages/bannerMessages.js +++ b/src/components/bannerMessages/bannerMessages.js @@ -11,6 +11,14 @@ import { useBannerMessages, useRemoveBannerMessages } from './bannerMessagesCont * @property {module} BannerMessagesContext */ +/** + * Banner message variants. + * + * @type {{success: AlertVariant.success, custom: AlertVariant.custom, warning: AlertVariant.warning, + * danger: AlertVariant.danger, info: AlertVariant.info}} + */ +const BannerMessageVariant = { ...AlertVariant }; + /** * Render banner messages. * @@ -30,7 +38,7 @@ const BannerMessages = ({ return (
    - {bannerMessages?.map(({ id, message, title, variant = AlertVariant.info }) => { + {bannerMessages?.map(({ id, message, title, variant = BannerMessageVariant.info }) => { const actionClose = removeBannerMessages(id || title)} />; return ( @@ -67,4 +75,4 @@ BannerMessages.defaultProps = { useRemoveBannerMessages }; -export { BannerMessages as default, BannerMessages }; +export { BannerMessages as default, BannerMessages, BannerMessageVariant }; diff --git a/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap b/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap index 7beaa9f64..1d5b9cb20 100644 --- a/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap +++ b/src/components/chart/__tests__/__snapshots__/chartElements.test.js.snap @@ -1,316 +1,200 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ChartElements Component should handle basic element settings from context: chart elements 1`] = ` - -
    - - - } role="presentation" - shape-rendering="auto" - style="stroke: var(--pf-chart-axis--axis--stroke--Color, #d2d2d2); fill: var(--pf-chart-axis--axis--Fill, transparent); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;" - vector-effect="non-scaling-stroke" - x1="55" - x2="-55" - y1="225" - y2="225" + shapeRendering="auto" /> - - - - - - } + capHeight={0.71} + direction="inherit" + groupComponent={} + lineHeight={1} + textComponent={} + tspanComponent={} /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - } role="presentation" - shape-rendering="auto" - style="fill: none; stroke: #lorem; stroke-width: 2; fill-opacity: 0.3;" + shapeRendering="auto" /> - - - - -
    - -
    -
    -     + } + flyoutStyle={ + { + "fill": "transparent", + "stroke": "transparent", + } + } + groupComponent={} + labelComponent={} + renderInPortal={true} + /> + } + labels={[Function]} + mouseFollowTooltips={true} + portalComponent={} + portalZIndex={99} + responsive={true} + role="img" + voronoiDimension="x" + voronoiPadding={50} + /> + } + domain={ + { + "y": [ + 0, + 3, + ], + } + } + padding={ + { + "bottom": 75, + "left": 55, + "right": 55, + "top": 50, + } + } + themeColor="blue" + width={0} +> + + + + + + + `; exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -349,7 +233,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` }" >
    @@ -410,7 +294,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -441,7 +325,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -472,7 +356,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -503,7 +387,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -535,7 +419,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -579,7 +463,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -610,7 +494,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -641,7 +525,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` @@ -672,7 +556,7 @@ exports[`ChartElements Component should render a basic component: basic 1`] = ` diff --git a/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap b/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap index 639f49af7..900d8e11d 100644 --- a/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap +++ b/src/components/chart/__tests__/__snapshots__/chartIcon.test.js.snap @@ -5,6 +5,7 @@ exports[`ChartIcon Component should handle basic icons, variations in settings: class="curiosity-chartarea__icon curiosity-chartarea__icon-dash" > diff --git a/src/components/chart/__tests__/chartElements.test.js b/src/components/chart/__tests__/chartElements.test.js index cbfaf1085..126a532ca 100644 --- a/src/components/chart/__tests__/chartElements.test.js +++ b/src/components/chart/__tests__/chartElements.test.js @@ -11,7 +11,7 @@ describe('ChartElements Component', () => { expect(component).toMatchSnapshot('basic'); }); - it('should handle basic element settings from context', () => { + it('should handle basic element settings from context', async () => { const props = {}; const mockContextValue = { chartSettings: { @@ -229,7 +229,7 @@ describe('ChartElements Component', () => { const mock = jest.spyOn(chartContext, 'useChartContext').mockImplementation(() => mockContextValue); - const component = renderComponent(); + const component = await shallowComponent(); expect(component).toMatchSnapshot('chart elements'); mock.mockClear(); }); diff --git a/src/components/chart/chartIcon.js b/src/components/chart/chartIcon.js index 43ad9f6e7..a4e7f8c65 100644 --- a/src/components/chart/chartIcon.js +++ b/src/components/chart/chartIcon.js @@ -1,12 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { EyeIcon, EyeSlashIcon, SquareIcon, IconSize } from '@patternfly/react-icons'; +import { EyeIcon, EyeSlashIcon, SquareIcon } from '@patternfly/react-icons'; /** * @memberof Chart * @module ChartIcon */ +/** + * Consistent icon sizing. + * + * @type {{xl, md: string, sm: string, lg: string}} + */ +const IconSize = { sm: 'sm', md: 'md', lg: 'lg', xl: 'xl' }; + /** * Emulate pf icon sizing for custom SVGs * @@ -63,6 +70,7 @@ const ChartIcon = ({ fill, symbol, size, title, ...props }) => { case 'dash': return ( { ); case 'threshold': return ( - +