Skip to content

Commit bb48cda

Browse files
wise-king-sullymanflorkbr
wise-king-sullyman
authored and
florkbr
committed
feat(deps)!: upgrade PatternFly to v6
1 parent ff942b6 commit bb48cda

File tree

154 files changed

+4432
-3884
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

154 files changed

+4432
-3884
lines changed

‎package-lock.json

+230-126
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@
4242
"@nx/web": "20.0.6",
4343
"@nx/webpack": "^20.0.6",
4444
"@openshift/dynamic-plugin-sdk-webpack": "^4.1.0",
45-
"@patternfly/quickstarts": "^5.4.1",
46-
"@patternfly/react-core": "^5.4.8",
47-
"@patternfly/react-icons": "^5.4.2",
48-
"@patternfly/react-table": "^5.4.9",
45+
"@patternfly/quickstarts": "^6.0.0",
46+
"@patternfly/react-core": "^6.0.0",
47+
"@patternfly/react-icons": "^6.0.0",
48+
"@patternfly/react-table": "^6.0.0",
4949
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
5050
"@simonsmith/cypress-image-snapshot": "^9.1.0",
5151
"@swc-node/register": "^1.10.9",

‎packages/advisor-components/cypress/component/ReportDetails/ReportDetails.spec.cy.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ describe('report details: kba loaded', () => {
2727
});
2828

2929
it('renders correct number of headers', () => {
30-
cy.get('.pf-v5-c-card__header').should('have.length', HEADERS.length);
31-
HEADERS.forEach((h) => cy.get('.pf-v5-c-card__header').contains(h).should('have.length', 1));
30+
cy.get('.pf-v6-c-card__header').should('have.length', HEADERS.length);
31+
HEADERS.forEach((h) => cy.get('.pf-v6-c-card__header').contains(h).should('have.length', 1));
3232
});
3333

3434
it('each header has an icon', () => {
35-
cy.get('.pf-v5-c-card__header-main > .ins-c-report-details__icon').should('have.length', HEADERS.length);
35+
cy.get('.pf-v6-c-card__header-main > .ins-c-report-details__icon').should('have.length', HEADERS.length);
3636
});
3737

3838
it('links have an icon', () => {
@@ -64,12 +64,12 @@ describe('report details: kba loaded', () => {
6464

6565
it('renders three dividers', () => {
6666
// TODO: make the assertion number dependant on input test data
67-
cy.get('hr[class=pf-v5-c-divider]').should('have.length', 3);
67+
cy.get('hr[class=pf-v6-c-divider]').should('have.length', 3);
6868
});
6969

7070
it('renders a loaded kba link', () => {
71-
cy.get(`${ROOT} .ins-c-report-details__kba .pf-v5-c-card__body`).find('.pf-v5-c-skeleton').should('have.length', 0);
72-
cy.get(`${ROOT} .ins-c-report-details__kba .pf-v5-c-card__body`)
71+
cy.get(`${ROOT} .ins-c-report-details__kba .pf-v6-c-card__body`).find('.pf-v6-c-skeleton').should('have.length', 0);
72+
cy.get(`${ROOT} .ins-c-report-details__kba .pf-v6-c-card__body`)
7373
.contains(props.kbaDetail.publishedTitle)
7474
.invoke('attr', 'href')
7575
.should('eq', props.kbaDetail.view_uri);
@@ -82,6 +82,6 @@ describe('report details: kba loading', () => {
8282
});
8383

8484
it('renders skeleton instead of a kba link', () => {
85-
cy.get(`${ROOT} .ins-c-report-details__kba .pf-v5-c-card__body`).find('.pf-v5-c-skeleton').should('have.length', 1);
85+
cy.get(`${ROOT} .ins-c-report-details__kba .pf-v6-c-card__body`).find('.pf-v6-c-skeleton').should('have.length', 1);
8686
});
8787
});

‎packages/advisor-components/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@
1919
},
2020
"homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/advisor-components#readme",
2121
"peerDependencies": {
22-
"@patternfly/react-core": "^5.0.0",
23-
"@patternfly/react-icons": "^5.0.0",
22+
"@patternfly/react-core": "^6.0.0",
23+
"@patternfly/react-icons": "^6.0.0",
2424
"prop-types": "^15.6.2",
2525
"react": "^18.2.0",
2626
"react-dom": "^18.2.0",
2727
"react-router-dom": "^5.0.0 || ^6.0.0"
2828
},
2929
"dependencies": {
30-
"@redhat-cloud-services/frontend-components": "^5.0.1",
30+
"@redhat-cloud-services/frontend-components": "^5.0.2",
3131
"dot": "^1.1.3",
3232
"lodash": "^4.17.21",
3333
"marked": "14.1.2",

‎packages/advisor-components/src/RebootRequired/RebootRequired.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77

88
.reboot-required-icon {
99
margin-top: 5px;
10-
margin-right: var(--pf-v5-global--spacer--sm);
11-
color: var(--pf-v5-global--palette--red-100);
10+
margin-right: var(--pf-t--global--spacer--sm);
11+
color: var(--pf-t--global--color--status--danger--default);
1212
}
1313

1414
.no-reboot-required-icon {
1515
margin-top: 5px;
16-
margin-right: var(--pf-v5-global--spacer--sm);
17-
color: var(--pf-v5-global--palette--black-400);
16+
margin-right: var(--pf-t--global--spacer--sm);
17+
color: var(--pf-t--global--color--nonstatus--gray--default);
1818
}
1919
}

‎packages/advisor-components/src/RebootRequired/RebootRequired.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import './RebootRequired.scss';
22

33
import React from 'react';
4-
import { Icon, Text, TextContent, TextVariants } from '@patternfly/react-core';
5-
import { PowerOffIcon } from '@patternfly/react-icons';
4+
import { Icon } from '@patternfly/react-core/dist/js/components/Icon/Icon';
5+
import { Content, ContentVariants } from '@patternfly/react-core/dist/js/components/Content/Content';
6+
import { PowerOffIcon } from '@patternfly/react-icons/dist/dynamic/icons/power-off-icon';
67
import { RuleDetailsMessages } from '../RuleDetails/RuleDetailsMessages';
78

89
interface RebootRequiredProps {
@@ -15,9 +16,9 @@ const RebootRequired: React.FC<RebootRequiredProps> = ({ messages, rebootRequire
1516
<Icon>
1617
<PowerOffIcon className={rebootRequired ? 'reboot-required-icon' : 'no-reboot-required-icon'} />
1718
</Icon>
18-
<TextContent className="system-reboot-message__content">
19-
<Text component={TextVariants.p}>{messages.systemReboot}</Text>
20-
</TextContent>
19+
<Content className="system-reboot-message__content">
20+
<Content component={ContentVariants.p}>{messages.systemReboot}</Content>
21+
</Content>
2122
</span>
2223
);
2324

‎packages/advisor-components/src/ReportDetails/ReportDetails.scss

+11-11
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
&__cards-stack {
55
pre {
66
display: block;
7-
color: var(--pf-v5-global--Color--100);
7+
color: var(--pf-t--color--gray--95);
88
word-break: break-all;
99
word-wrap: break-word;
10-
background-color: var(--pf-v5-global--BackgroundColor--light-200);
11-
border: 1px solid var(--pf-v5-global--BorderColor--100);
10+
background-color: var(pf-t--global--background--color--200);
11+
border: 1px solid var(--pf-t--global--border--color--100);
1212
border-radius: 4px;
1313
@include m.rem('padding', 10px);
1414
@include m.rem('margin', (10px, 0));
@@ -42,25 +42,25 @@
4242
h4,
4343
h5,
4444
h6 {
45-
font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
45+
font-family: var(--pf-t--global--font--family--heading);
4646
line-height: 1.5;
4747
}
4848

4949
h1 {
50-
font-size: var(--pf-v5-global--FontSize--2xl);
50+
font-size: var(--pf-t--global--font--size--2xl);
5151
line-height: 1.3;
5252
}
5353
h2 {
54-
font-size: var(--pf-v5-global--FontSize--xl);
54+
font-size: var(--pf-t--global--font--size--xl);
5555
}
5656
h3 {
57-
font-size: var(--pf-v5-global--FontSize--lg);
57+
font-size: var(--pf-t--global--font--size--lg);
5858
}
5959
h4, h5, h6 {
60-
font-size: var(--pf-v5-global--FontSize--md);
60+
font-size: var(--pf-t--global--font--size--md);
6161
}
6262

63-
.pf-v5-c-list {
63+
.pf-v6-c-list {
6464
@include m.rem('margin', 5px 0);
6565
}
6666

@@ -69,7 +69,7 @@
6969
@include m.rem('margin-top', 10px);
7070

7171
tr {
72-
border-bottom: 1px solid var(--pf-v5-global--BorderColor--300);
72+
border-bottom: 1px solid var(--pf-t--global--border--color--on-secondary);
7373
}
7474

7575
th,
@@ -80,6 +80,6 @@
8080
}
8181

8282
&__icon {
83-
margin-right: var(--pf-v5-global--spacer--sm);
83+
margin-right: var(--pf-t--global--spacer--sm);
8484
}
8585
}

‎packages/advisor-components/src/ReportDetails/ReportDetails.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,17 @@ import './ReportDetails.scss';
22

33
import React, { useState } from 'react';
44

5-
import { Alert, Card, CardBody, CardHeader, Divider, Stack, StackItem } from '@patternfly/react-core';
6-
import { BullseyeIcon, InfoCircleIcon, LightbulbIcon, ThumbsUpIcon } from '@patternfly/react-icons';
5+
import { Alert } from '@patternfly/react-core/dist/dynamic/components/Alert';
6+
import { Card } from '@patternfly/react-core/dist/dynamic/components/Card';
7+
import { CardBody } from '@patternfly/react-core/dist/dynamic/components/Card';
8+
import { CardHeader } from '@patternfly/react-core/dist/dynamic/components/Card';
9+
import { Divider } from '@patternfly/react-core/dist/dynamic/components/Divider';
10+
import { Stack } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
11+
import { StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
12+
import BullseyeIcon from '@patternfly/react-icons/dist/dynamic/icons/bullseye-icon';
13+
import InfoCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/info-circle-icon';
14+
import LightbulbIcon from '@patternfly/react-icons/dist/dynamic/icons/lightbulb-icon';
15+
import ThumbsUpIcon from '@patternfly/react-icons/dist/dynamic/icons/thumbs-up-icon';
716
import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/Skeleton';
817

918
import { RuleContentOcp, RuleContentRhel } from '../types';

‎packages/advisor-components/src/RuleDescription/RuleDescription.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.ins-c-generic__override {
22
p {
33
margin-top: 0;
4-
margin-bottom: var(--pf-v5-global--spacer--md);
4+
margin-bottom: var(--pf-t--global--spacer--md);
55
}
66
}

‎packages/advisor-components/src/RuleDetails/RuleDetails.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.ins-c-line {
2-
border: 0.01rem solid var(--pf-v5-global--BorderColor--100);
2+
border: 0.01rem solid var(--pf-t--global--border--color--100);
33
}
44

55
.ins-c-rule-details__stack {
66
width: 600px;
7-
.pf-v5-c-content {
8-
font-size: var(--pf-v5-global--FontSize--sm);
7+
.pf-v6-c-content {
8+
font-size: var(--pf-t--global--font--size--sm);
99
}
1010
}

‎packages/advisor-components/src/RuleDetails/RuleDetails.tsx

+15-9
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@ import './RuleDetails.scss';
22

33
import React from 'react';
44

5-
import { Flex, FlexItem, Icon, Stack, StackItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
6-
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
5+
import { Flex } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
6+
import { FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
7+
import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
8+
import { Stack } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
9+
import { StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
10+
import { Content } from '@patternfly/react-core/dist/dynamic/components/Content';
11+
import { ContentVariants } from '@patternfly/react-core/dist/dynamic/components/Content';
12+
import ExternalLinkAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
713

814
import InsightsLabel from '@redhat-cloud-services/frontend-components/InsightsLabel';
915
import { SeverityLine } from '@redhat-cloud-services/frontend-components/SeverityLine';
@@ -95,9 +101,9 @@ const RuleDetails: React.FC<RuleDetailsProps> = ({
95101
<FlexItem>
96102
<Stack hasGutter>
97103
<StackItem className="ins-c-rule-details__total-risk-body">
98-
<TextContent>
99-
<Text component={TextVariants.p}>{messages.rulesDetailsTotalRiskBody}</Text>
100-
</TextContent>
104+
<Content>
105+
<Content component={ContentVariants.p}>{messages.rulesDetailsTotalRiskBody}</Content>
106+
</Content>
101107
</StackItem>
102108
<Stack>
103109
<StackItem>
@@ -127,7 +133,7 @@ const RuleDetails: React.FC<RuleDetailsProps> = ({
127133
<FlexItem spacer={{ default: 'spacerSm' }}>
128134
<strong>{messages.riskOfChange}</strong>
129135
</FlexItem>
130-
<FlexItem className={`pf-v5-u-display-inline-flex alignCenterOverride pf-v5-u-pb-sm pf-v5-u-pt-sm`}>
136+
<FlexItem className={`pf-v6-u-display-inline-flex alignCenterOverride pf-v6-u-pb-sm pf-v6-u-pt-sm`}>
131137
<Flex flexWrap={{ default: 'nowrap' }}>
132138
<FlexItem>
133139
{/* remove pf-m-compact class name once https://github.com/patternfly/patternfly-react/issues/7196 is resolved */}
@@ -142,9 +148,9 @@ const RuleDetails: React.FC<RuleDetailsProps> = ({
142148
<FlexItem className="ins-c-rule-details__risk-of-ch-desc">
143149
<Stack hasGutter>
144150
<StackItem>
145-
<TextContent>
146-
<Text component={TextVariants.p}>{resolutionRiskDesc}</Text>
147-
</TextContent>
151+
<Content>
152+
<Content component={ContentVariants.p}>{resolutionRiskDesc}</Content>
153+
</Content>
148154
</StackItem>
149155
{product === AdvisorProduct.rhel && (
150156
<StackItem className="ins-c-rule-details__reboot">

‎packages/advisor-components/src/RuleRating/RuleRating.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.ins-c-like {
2-
color: var(--pf-v5-global--success-color--100);
2+
color: var(--pf-t--global--color--status--success--default);
33
}
44

55
.ins-c-dislike {
6-
color: var(--pf-v5-global--primary-color--100);
6+
color: var(--pf-t--global--text--color--regular);
77
}
88

99
.ratingSpanOverride {
10-
font-size: var(--pf-v5-global--FontSize--sm) !important;
10+
font-size: var(--pf-t--global--font--size--sm) !important;
1111
button {
1212
padding: 8px;
1313
}

‎packages/advisor-components/src/RuleRating/RuleRating.tsx

+20-8
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@ import './RuleRating.scss';
33
import React, { useCallback, useState } from 'react';
44
import debounce from 'lodash/debounce';
55

6-
import { Button, Icon } from '@patternfly/react-core';
7-
import { OutlinedThumbsDownIcon, OutlinedThumbsUpIcon, ThumbsDownIcon, ThumbsUpIcon } from '@patternfly/react-icons';
6+
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
7+
import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
8+
import OutlinedThumbsDownIcon from '@patternfly/react-icons/dist/dynamic/icons/outlined-thumbs-down-icon';
9+
import OutlinedThumbsUpIcon from '@patternfly/react-icons/dist/dynamic/icons/outlined-thumbs-up-icon';
10+
import ThumbsDownIcon from '@patternfly/react-icons/dist/dynamic/icons/thumbs-down-icon';
11+
import ThumbsUpIcon from '@patternfly/react-icons/dist/dynamic/icons/thumbs-up-icon';
812

913
import { Rating } from '../types';
1014
import { RuleDetailsMessages } from '../RuleDetails/RuleDetailsMessages';
@@ -45,12 +49,20 @@ const RuleRating: React.FC<RuleRatingProps> = ({ messages, ruleId, ruleRating, o
4549
return (
4650
<span className="ratingSpanOverride">
4751
{messages.ruleHelpful}
48-
<Button variant="plain" aria-label="thumbs-up" onClick={() => updateRuleRating(1)} ouiaId="thumbsUp">
49-
<Icon size="md">{rating === 1 ? <ThumbsUpIcon className="ins-c-like" /> : <OutlinedThumbsUpIcon />}</Icon>
50-
</Button>
51-
<Button variant="plain" aria-label="thumbs-down" onClick={() => updateRuleRating(-1)} ouiaId="thumbsDown">
52-
<Icon size="md">{rating === -1 ? <ThumbsDownIcon className="ins-c-dislike" /> : <OutlinedThumbsDownIcon />}</Icon>
53-
</Button>
52+
<Button
53+
icon={<Icon size="md">{rating === 1 ? <ThumbsUpIcon className="ins-c-like" /> : <OutlinedThumbsUpIcon />}</Icon>}
54+
variant="plain"
55+
aria-label="thumbs-up"
56+
onClick={() => updateRuleRating(1)}
57+
ouiaId="thumbsUp"
58+
/>
59+
<Button
60+
icon={<Icon size="md">{rating === -1 ? <ThumbsDownIcon className="ins-c-dislike" /> : <OutlinedThumbsDownIcon />}</Icon>}
61+
variant="plain"
62+
aria-label="thumbs-down"
63+
onClick={() => updateRuleRating(-1)}
64+
ouiaId="thumbsDown"
65+
/>
5466
{submitted && messages.feedbackThankYou}
5567
</span>
5668
);

‎packages/advisor-components/src/TemplateProcessor/TemplateProcessor.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const TemplateProcessor: React.FC<TemplateProcessorProps> = ({ template, definit
4040
allowedAttributes: { '*': ['href', 'target', 'class', 'style', 'rel'] },
4141
allowedSchemes: ['https'], // links must lead only to https://access.redhat.com/
4242
transformTags: {
43-
ul: simpleTransform('ul', { class: 'pf-v5-c-list', style: 'font-size: inherit' }),
43+
ul: simpleTransform('ul', { class: 'pf-v6-c-list', style: 'font-size: inherit' }),
4444
a: simpleTransform('a', { rel: 'noopener noreferrer', target: '_blank' }),
4545
},
4646
});

‎packages/components/.eslintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"extends": ["../../.eslintrc.js"],
3-
"ignorePatterns": ["!**/*", "**/*.scss"]
3+
"ignorePatterns": ["!**/*", "**/*.scss"],
44
}

‎packages/components/cypress/component/Breadcrumbs/Breadcrumbs.spec.cy.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ describe('Breadcrumbs component', () => {
1313

1414
it('renders multiple items correctly', () => {
1515
cy.mount(<Breadcrumbs items={items} current={'third'} onNavigate={undefined} />);
16-
cy.get('.pf-v5-c-breadcrumb__list').children().should('have.length', 3);
16+
cy.get('.pf-v6-c-breadcrumb__list').children().should('have.length', 3);
1717
});
1818

1919
it('fires callback when an item is clicked', () => {
2020
const onNavigateSpy = cy.spy().as('onNavigateSpy');
2121
cy.mount(<Breadcrumbs items={items} current={'third'} onNavigate={onNavigateSpy} />);
22-
cy.get('.pf-v5-c-breadcrumb__list > li[data-key="1"] > a').click();
22+
cy.get('.pf-v6-c-breadcrumb__list > li[data-key="1"] > a').click();
2323
cy.get('@onNavigateSpy').should('have.been.calledWithMatch', Cypress.sinon.match.object, 'second', 1);
2424
});
2525
});

‎packages/components/cypress/component/BulkSelect/BulkSelect.spec.cy.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ describe('BulkSelect component', () => {
2424
it('renders component with data', () => {
2525
cy.mount(<BulkSelect {...config} />);
2626
cy.get('#toggle-checkbox').should('contain.text', '100');
27-
cy.get('.pf-v5-c-menu-toggle__controls').click();
27+
cy.get('.pf-v6-c-menu-toggle__controls').click();
2828
// PF has one extra hidden button element
29-
cy.get('.pf-v5-c-menu__list').find('>li>button').should('have.length', 3);
29+
cy.get('.pf-v6-c-menu__list').find('>li>button').should('have.length', 3);
3030
});
3131

3232
it('cannot be expanded or checked when disabled', () => {
3333
cy.mount(<BulkSelect {...config} isDisabled={true} />);
34-
cy.get('.pf-v5-c-menu-toggle__controls').click({ force: true });
35-
cy.get('.pf-v5-c-menu__list').should('not.exist');
34+
cy.get('.pf-v6-c-menu-toggle__controls').click({ force: true });
35+
cy.get('.pf-v6-c-menu__list').should('not.exist');
3636
cy.get('input[name="toggle-checkbox"]').check({ force: true });
3737
cy.get('input[name="toggle-checkbox"]').should('not.be.checked');
3838
});
@@ -42,10 +42,10 @@ describe('BulkSelect component', () => {
4242
config.items[1].onClick = cy.spy().as('disabledSpy');
4343
config.onClick = cy.spy().as('checkboxSpy');
4444
cy.mount(<BulkSelect {...config} />);
45-
cy.get('.pf-v5-c-menu-toggle__controls').click();
46-
cy.get('.pf-v5-c-menu__list').find('>li>button').eq(1).click();
47-
cy.get('.pf-v5-c-menu-toggle__controls').click();
48-
cy.get('.pf-v5-c-menu__list').find('>li>button').eq(2).click({ force: true });
45+
cy.get('.pf-v6-c-menu-toggle__controls').click();
46+
cy.get('.pf-v6-c-menu__list').find('>li>button').eq(1).click();
47+
cy.get('.pf-v6-c-menu-toggle__controls').click();
48+
cy.get('.pf-v6-c-menu__list').find('>li>button').eq(2).click({ force: true });
4949
cy.get('input[name="toggle-checkbox"]').check();
5050
cy.get('@enabledSpy').should('have.been.called');
5151
cy.get('@disabledSpy').should('not.have.been.called');

0 commit comments

Comments
 (0)