Merge pull request #2131 from wise-king-sullyman/pf-v6-final-migration

feat(deps): upgrade PatternFly to v6
RedHatInsights · Dec 16, 2024 · 5add04c · 5add04c
2 parents 587afad + 3620854
commit 5add04c
Show file tree

Hide file tree

Showing 159 changed files with 4,385 additions and 4,278 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,10 +42,10 @@
     "@nx/web": "20.0.6",
     "@nx/webpack": "^20.0.6",
     "@openshift/dynamic-plugin-sdk-webpack": "^4.1.0",
-    "@patternfly/quickstarts": "^5.4.1",
-    "@patternfly/react-core": "^5.4.8",
-    "@patternfly/react-icons": "^5.4.2",
-    "@patternfly/react-table": "^5.4.9",
+    "@patternfly/quickstarts": "^6.0.0",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-table": "^6.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@swc-node/register": "^1.10.9",

diff --git a/packages/advisor-components/cypress/component/ReportDetails/ReportDetails.spec.cy.tsx b/packages/advisor-components/cypress/component/ReportDetails/ReportDetails.spec.cy.tsx
@@ -27,12 +27,12 @@ describe('report details: kba loaded', () => {
   });
 
   it('renders correct number of headers', () => {
-    cy.get('.pf-v5-c-card__header').should('have.length', HEADERS.length);
-    HEADERS.forEach((h) => cy.get('.pf-v5-c-card__header').contains(h).should('have.length', 1));
+    cy.get('.pf-v6-c-card__header').should('have.length', HEADERS.length);
+    HEADERS.forEach((h) => cy.get('.pf-v6-c-card__header').contains(h).should('have.length', 1));
   });
 
   it('each header has an icon', () => {
-    cy.get('.pf-v5-c-card__header-main > .ins-c-report-details__icon').should('have.length', HEADERS.length);
+    cy.get('.pf-v6-c-card__header-main > .ins-c-report-details__icon').should('have.length', HEADERS.length);
   });
 
   it('links have an icon', () => {
@@ -64,12 +64,12 @@ describe('report details: kba loaded', () => {
 
   it('renders three dividers', () => {
     // TODO: make the assertion number dependant on input test data
-    cy.get('hr[class=pf-v5-c-divider]').should('have.length', 3);
+    cy.get('hr[class=pf-v6-c-divider]').should('have.length', 3);
   });
 
   it('renders a loaded kba link', () => {
-    cy.get(`${ROOT} .ins-c-report-details__kba .pf-v5-c-card__body`).find('.pf-v5-c-skeleton').should('have.length', 0);
-    cy.get(`${ROOT} .ins-c-report-details__kba .pf-v5-c-card__body`)
+    cy.get(`${ROOT} .ins-c-report-details__kba .pf-v6-c-card__body`).find('.pf-v6-c-skeleton').should('have.length', 0);
+    cy.get(`${ROOT} .ins-c-report-details__kba .pf-v6-c-card__body`)
       .contains(props.kbaDetail.publishedTitle)
       .invoke('attr', 'href')
       .should('eq', props.kbaDetail.view_uri);
@@ -82,6 +82,6 @@ describe('report details: kba loading', () => {
   });
 
   it('renders skeleton instead of a kba link', () => {
-    cy.get(`${ROOT} .ins-c-report-details__kba .pf-v5-c-card__body`).find('.pf-v5-c-skeleton').should('have.length', 1);
+    cy.get(`${ROOT} .ins-c-report-details__kba .pf-v6-c-card__body`).find('.pf-v6-c-skeleton').should('have.length', 1);
   });
 });
diff --git a/packages/advisor-components/package.json b/packages/advisor-components/package.json
@@ -19,15 +19,15 @@
   },
   "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/advisor-components#readme",
   "peerDependencies": {
-    "@patternfly/react-core": "^5.0.0",
-    "@patternfly/react-icons": "^5.0.0",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
     "prop-types": "^15.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.0.0 || ^6.0.0"
   },
   "dependencies": {
-    "@redhat-cloud-services/frontend-components": "^5.0.1",
+    "@redhat-cloud-services/frontend-components": "^5.0.2",
     "dot": "^1.1.3",
     "lodash": "^4.17.21",
     "marked": "14.1.2",

diff --git a/packages/advisor-components/src/RebootRequired/RebootRequired.scss b/packages/advisor-components/src/RebootRequired/RebootRequired.scss
@@ -7,13 +7,13 @@
 
   .reboot-required-icon {
     margin-top: 5px;
-    margin-right: var(--pf-v5-global--spacer--sm);
-    color: var(--pf-v5-global--palette--red-100);
+    margin-right: var(--pf-t--global--spacer--sm);
+    color: var(--pf-t--global--color--status--danger--default);
   }
 
   .no-reboot-required-icon {
     margin-top: 5px;
-    margin-right: var(--pf-v5-global--spacer--sm);
-    color: var(--pf-v5-global--palette--black-400);
+    margin-right: var(--pf-t--global--spacer--sm);
+    color: var(--pf-t--global--color--nonstatus--gray--default);
   }
 }
diff --git a/packages/advisor-components/src/RebootRequired/RebootRequired.tsx b/packages/advisor-components/src/RebootRequired/RebootRequired.tsx
@@ -1,8 +1,9 @@
 import './RebootRequired.scss';
 
 import React from 'react';
-import { Icon, Text, TextContent, TextVariants } from '@patternfly/react-core';
-import { PowerOffIcon } from '@patternfly/react-icons';
+import { Icon } from '@patternfly/react-core/dist/js/components/Icon/Icon';
+import { Content, ContentVariants } from '@patternfly/react-core/dist/js/components/Content/Content';
+import { PowerOffIcon } from '@patternfly/react-icons/dist/dynamic/icons/power-off-icon';
 import { RuleDetailsMessages } from '../RuleDetails/RuleDetailsMessages';
 
 interface RebootRequiredProps {
@@ -15,9 +16,9 @@ const RebootRequired: React.FC<RebootRequiredProps> = ({ messages, rebootRequire
     <Icon>
       <PowerOffIcon className={rebootRequired ? 'reboot-required-icon' : 'no-reboot-required-icon'} />
     </Icon>
-    <TextContent className="system-reboot-message__content">
-      <Text component={TextVariants.p}>{messages.systemReboot}</Text>
-    </TextContent>
+    <Content className="system-reboot-message__content">
+      <Content component={ContentVariants.p}>{messages.systemReboot}</Content>
+    </Content>
   </span>
 );
 

diff --git a/packages/advisor-components/src/ReportDetails/ReportDetails.scss b/packages/advisor-components/src/ReportDetails/ReportDetails.scss
@@ -4,11 +4,11 @@
   &__cards-stack {
     pre {
       display: block;
-      color: var(--pf-v5-global--Color--100);
+      color: var(--pf-t--color--gray--95);
       word-break: break-all;
       word-wrap: break-word;
-      background-color: var(--pf-v5-global--BackgroundColor--light-200);
-      border: 1px solid var(--pf-v5-global--BorderColor--100);
+      background-color: var(pf-t--global--background--color--200);
+      border: 1px solid var(--pf-t--global--border--color--100);
       border-radius: 4px;
       @include m.rem('padding', 10px);
       @include m.rem('margin', (10px, 0));
@@ -42,25 +42,25 @@
     h4,
     h5,
     h6 {
-      font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+      font-family: var(--pf-t--global--font--family--heading);
       line-height: 1.5;
     }
 
     h1 {
-      font-size: var(--pf-v5-global--FontSize--2xl);
+      font-size: var(--pf-t--global--font--size--2xl);
       line-height: 1.3;
     }
     h2 {
-      font-size: var(--pf-v5-global--FontSize--xl);
+      font-size: var(--pf-t--global--font--size--xl);
     }
     h3 {
-      font-size: var(--pf-v5-global--FontSize--lg);
+      font-size: var(--pf-t--global--font--size--lg);
     }
     h4, h5, h6 {
-      font-size: var(--pf-v5-global--FontSize--md);
+      font-size: var(--pf-t--global--font--size--md);
     }
 
-    .pf-v5-c-list {
+    .pf-v6-c-list {
       @include m.rem('margin', 5px 0);
     }
 
@@ -69,7 +69,7 @@
       @include m.rem('margin-top', 10px);
 
       tr {
-        border-bottom: 1px solid var(--pf-v5-global--BorderColor--300);
+        border-bottom: 1px solid var(--pf-t--global--border--color--on-secondary);
       }
 
       th,
@@ -80,6 +80,6 @@
   }
 
   &__icon {
-    margin-right: var(--pf-v5-global--spacer--sm);
+    margin-right: var(--pf-t--global--spacer--sm);
   }
 }
diff --git a/packages/advisor-components/src/ReportDetails/ReportDetails.tsx b/packages/advisor-components/src/ReportDetails/ReportDetails.tsx
@@ -2,8 +2,17 @@ import './ReportDetails.scss';
 
 import React, { useState } from 'react';
 
-import { Alert, Card, CardBody, CardHeader, Divider, Stack, StackItem } from '@patternfly/react-core';
-import { BullseyeIcon, InfoCircleIcon, LightbulbIcon, ThumbsUpIcon } from '@patternfly/react-icons';
+import { Alert } from '@patternfly/react-core/dist/dynamic/components/Alert';
+import { Card } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { CardBody } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { CardHeader } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { Divider } from '@patternfly/react-core/dist/dynamic/components/Divider';
+import { Stack } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import { StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import BullseyeIcon from '@patternfly/react-icons/dist/dynamic/icons/bullseye-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/info-circle-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/dynamic/icons/lightbulb-icon';
+import ThumbsUpIcon from '@patternfly/react-icons/dist/dynamic/icons/thumbs-up-icon';
 import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components/Skeleton';
 
 import { RuleContentOcp, RuleContentRhel } from '../types';

diff --git a/packages/advisor-components/src/RuleDescription/RuleDescription.scss b/packages/advisor-components/src/RuleDescription/RuleDescription.scss
@@ -1,6 +1,6 @@
 .ins-c-generic__override {
   p {
     margin-top: 0;
-    margin-bottom: var(--pf-v5-global--spacer--md);
+    margin-bottom: var(--pf-t--global--spacer--md);
   }
 }
diff --git a/packages/advisor-components/src/RuleDetails/RuleDetails.scss b/packages/advisor-components/src/RuleDetails/RuleDetails.scss
@@ -1,10 +1,10 @@
 .ins-c-line {
-  border: 0.01rem solid var(--pf-v5-global--BorderColor--100);
+  border: 0.01rem solid var(--pf-t--global--border--color--100);
 }
 
 .ins-c-rule-details__stack {
   width: 600px;
-  .pf-v5-c-content {
-    font-size: var(--pf-v5-global--FontSize--sm);
+  .pf-v6-c-content {
+    font-size: var(--pf-t--global--font--size--sm);
   }
 }
diff --git a/packages/advisor-components/src/RuleDetails/RuleDetails.tsx b/packages/advisor-components/src/RuleDetails/RuleDetails.tsx
@@ -2,8 +2,14 @@ import './RuleDetails.scss';
 
 import React from 'react';
 
-import { Flex, FlexItem, Icon, Stack, StackItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { Flex } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
+import { FlexItem } from '@patternfly/react-core/dist/dynamic/layouts/Flex';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
+import { Stack } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import { StackItem } from '@patternfly/react-core/dist/dynamic/layouts/Stack';
+import { Content } from '@patternfly/react-core/dist/dynamic/components/Content';
+import { ContentVariants } from '@patternfly/react-core/dist/dynamic/components/Content';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
 
 import InsightsLabel from '@redhat-cloud-services/frontend-components/InsightsLabel';
 import { SeverityLine } from '@redhat-cloud-services/frontend-components/SeverityLine';
@@ -95,9 +101,9 @@ const RuleDetails: React.FC<RuleDetailsProps> = ({
                 <FlexItem>
                   <Stack hasGutter>
                     <StackItem className="ins-c-rule-details__total-risk-body">
-                      <TextContent>
-                        <Text component={TextVariants.p}>{messages.rulesDetailsTotalRiskBody}</Text>
-                      </TextContent>
+                      <Content>
+                        <Content component={ContentVariants.p}>{messages.rulesDetailsTotalRiskBody}</Content>
+                      </Content>
                     </StackItem>
                     <Stack>
                       <StackItem>
@@ -127,7 +133,7 @@ const RuleDetails: React.FC<RuleDetailsProps> = ({
                 <FlexItem spacer={{ default: 'spacerSm' }}>
                   <strong>{messages.riskOfChange}</strong>
                 </FlexItem>
-                <FlexItem className={`pf-v5-u-display-inline-flex alignCenterOverride pf-v5-u-pb-sm pf-v5-u-pt-sm`}>
+                <FlexItem className={`pf-v6-u-display-inline-flex alignCenterOverride pf-v6-u-pb-sm pf-v6-u-pt-sm`}>
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       {/* 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> = ({
                     <FlexItem className="ins-c-rule-details__risk-of-ch-desc">
                       <Stack hasGutter>
                         <StackItem>
-                          <TextContent>
-                            <Text component={TextVariants.p}>{resolutionRiskDesc}</Text>
-                          </TextContent>
+                          <Content>
+                            <Content component={ContentVariants.p}>{resolutionRiskDesc}</Content>
+                          </Content>
                         </StackItem>
                         {product === AdvisorProduct.rhel && (
                           <StackItem className="ins-c-rule-details__reboot">

diff --git a/packages/advisor-components/src/RuleRating/RuleRating.scss b/packages/advisor-components/src/RuleRating/RuleRating.scss
@@ -1,13 +1,13 @@
 .ins-c-like {
-  color: var(--pf-v5-global--success-color--100);
+  color: var(--pf-t--global--color--status--success--default);
 }
 
 .ins-c-dislike {
-  color: var(--pf-v5-global--primary-color--100);
+  color: var(--pf-t--global--text--color--regular);
 }
 
 .ratingSpanOverride {
-  font-size: var(--pf-v5-global--FontSize--sm) !important;
+  font-size: var(--pf-t--global--font--size--sm) !important;
   button {
     padding: 8px;
   }

diff --git a/packages/advisor-components/src/RuleRating/RuleRating.tsx b/packages/advisor-components/src/RuleRating/RuleRating.tsx
@@ -3,8 +3,12 @@ import './RuleRating.scss';
 import React, { useCallback, useState } from 'react';
 import debounce from 'lodash/debounce';
 
-import { Button, Icon } from '@patternfly/react-core';
-import { OutlinedThumbsDownIcon, OutlinedThumbsUpIcon, ThumbsDownIcon, ThumbsUpIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
+import OutlinedThumbsDownIcon from '@patternfly/react-icons/dist/dynamic/icons/outlined-thumbs-down-icon';
+import OutlinedThumbsUpIcon from '@patternfly/react-icons/dist/dynamic/icons/outlined-thumbs-up-icon';
+import ThumbsDownIcon from '@patternfly/react-icons/dist/dynamic/icons/thumbs-down-icon';
+import ThumbsUpIcon from '@patternfly/react-icons/dist/dynamic/icons/thumbs-up-icon';
 
 import { Rating } from '../types';
 import { RuleDetailsMessages } from '../RuleDetails/RuleDetailsMessages';
@@ -45,12 +49,20 @@ const RuleRating: React.FC<RuleRatingProps> = ({ messages, ruleId, ruleRating, o
   return (
     <span className="ratingSpanOverride">
       {messages.ruleHelpful}
-      <Button variant="plain" aria-label="thumbs-up" onClick={() => updateRuleRating(1)} ouiaId="thumbsUp">
-        <Icon size="md">{rating === 1 ? <ThumbsUpIcon className="ins-c-like" /> : <OutlinedThumbsUpIcon />}</Icon>
-      </Button>
-      <Button variant="plain" aria-label="thumbs-down" onClick={() => updateRuleRating(-1)} ouiaId="thumbsDown">
-        <Icon size="md">{rating === -1 ? <ThumbsDownIcon className="ins-c-dislike" /> : <OutlinedThumbsDownIcon />}</Icon>
-      </Button>
+      <Button
+        icon={<Icon size="md">{rating === 1 ? <ThumbsUpIcon className="ins-c-like" /> : <OutlinedThumbsUpIcon />}</Icon>}
+        variant="plain"
+        aria-label="thumbs-up"
+        onClick={() => updateRuleRating(1)}
+        ouiaId="thumbsUp"
+      />
+      <Button
+        icon={<Icon size="md">{rating === -1 ? <ThumbsDownIcon className="ins-c-dislike" /> : <OutlinedThumbsDownIcon />}</Icon>}
+        variant="plain"
+        aria-label="thumbs-down"
+        onClick={() => updateRuleRating(-1)}
+        ouiaId="thumbsDown"
+      />
       {submitted && messages.feedbackThankYou}
     </span>
   );

diff --git a/packages/advisor-components/src/TemplateProcessor/TemplateProcessor.tsx b/packages/advisor-components/src/TemplateProcessor/TemplateProcessor.tsx
@@ -40,7 +40,7 @@ const TemplateProcessor: React.FC<TemplateProcessorProps> = ({ template, definit
       allowedAttributes: { '*': ['href', 'target', 'class', 'style', 'rel'] },
       allowedSchemes: ['https'], // links must lead only to https://access.redhat.com/
       transformTags: {
-        ul: simpleTransform('ul', { class: 'pf-v5-c-list', style: 'font-size: inherit' }),
+        ul: simpleTransform('ul', { class: 'pf-v6-c-list', style: 'font-size: inherit' }),
         a: simpleTransform('a', { rel: 'noopener noreferrer', target: '_blank' }),
       },
     });

diff --git a/packages/chrome/package.json b/packages/chrome/package.json
@@ -29,7 +29,7 @@
     "react-router-dom": "^6.0.0"
   },
   "devDependencies": {
-    "@redhat-cloud-services/types": "^1.0.3",
+    "@redhat-cloud-services/types": "^1.0.18",
     "@types/react": "^18.0.0",
     "glob": "10.3.3"
   },

diff --git a/packages/components/.eslintrc b/packages/components/.eslintrc
@@ -1,4 +1,4 @@
 {
   "extends": ["../../.eslintrc.js"],
-  "ignorePatterns": ["!**/*", "**/*.scss"]
+  "ignorePatterns": ["!**/*", "**/*.scss"],
 }
diff --git a/packages/components/cypress/component/Breadcrumbs/Breadcrumbs.spec.cy.js b/packages/components/cypress/component/Breadcrumbs/Breadcrumbs.spec.cy.js
@@ -13,13 +13,13 @@ describe('Breadcrumbs component', () => {
 
   it('renders multiple items correctly', () => {
     cy.mount(<Breadcrumbs items={items} current={'third'} onNavigate={undefined} />);
-    cy.get('.pf-v5-c-breadcrumb__list').children().should('have.length', 3);
+    cy.get('.pf-v6-c-breadcrumb__list').children().should('have.length', 3);
   });
 
   it('fires callback when an item is clicked', () => {
     const onNavigateSpy = cy.spy().as('onNavigateSpy');
     cy.mount(<Breadcrumbs items={items} current={'third'} onNavigate={onNavigateSpy} />);
-    cy.get('.pf-v5-c-breadcrumb__list > li[data-key="1"] > a').click();
+    cy.get('.pf-v6-c-breadcrumb__list > li[data-key="1"] > a').click();
     cy.get('@onNavigateSpy').should('have.been.calledWithMatch', Cypress.sinon.match.object, 'second', 1);
   });
 });