deps(pipeline): upgrade pipelines package to pf v6

redhat-developer · Dec 6, 2024 · 98f329e · 98f329e
1 parent 9bdf2f6
commit 98f329e
Show file tree

Hide file tree

Showing 26 changed files with 156 additions and 166 deletions.
diff --git a/.changeset/shiny-rules-hang.md b/.changeset/shiny-rules-hang.md
@@ -0,0 +1,5 @@
+---
+"@aonic-ui/pipelines": major
+---
+
+Upgrade to patternfly v6
diff --git a/packages/pipelines/package.json b/packages/pipelines/package.json
@@ -34,17 +34,17 @@
   },
   "homepage": "https://github.com/redhat-developer/aonic-ui#readme",
   "dependencies": {
-    "@patternfly/react-table": "^5.1.2",
+    "@patternfly/react-table": "^6.0.0",
     "js-yaml": "^4.1.0"
   },
   "devDependencies": {
     "@aonic-ui/eslint-config": "*",
     "@aonic-ui/jest-config": "*",
     "@aonic-ui/rollup-config": "*",
     "@aonic-ui/typescript-config": "*",
-    "@patternfly/react-core": "^5.1.2",
-    "@patternfly/react-icons": "^5.1.2",
-    "@patternfly/react-tokens": "^5.1.2",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-tokens": "^6.0.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -60,10 +60,10 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@patternfly/react-core": "^5.1.2",
-    "@patternfly/react-icons": "^5.1.2",
-    "@patternfly/react-table": "^5.1.2",
-    "@patternfly/react-tokens": "^5.1.2",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-table": "^6.0.0",
+    "@patternfly/react-tokens": "^6.0.0",
     "@testing-library/jest-dom": "^6.2.0",
     "react": "^18.2.0"
   },

diff --git a/packages/pipelines/src/components/Output/OutputCard.tsx b/packages/pipelines/src/components/Output/OutputCard.tsx
@@ -20,7 +20,7 @@ const OutputCard: React.FC<OutputCardProps> = ({ title, badge, isOpen, children
   const id = title?.replace(/\//g, '-')?.toLowerCase();
 
   return (
-    <Card id={id} isExpanded={tabOpen}>
+    <Card id={id} isExpanded={tabOpen} isPlain>
       <CardHeader
         onExpand={() => setTabOpen((open) => !open)}
         isToggleRightAligned={false}

diff --git a/.../pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/AdvancedClusterSecurity.tsx b/.../pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/AdvancedClusterSecurity.tsx
@@ -49,7 +49,7 @@ const AdvancedClusterSecurity: React.FC<AdvancedClusterSecurityProps> = (acsProp
       >
         {!isEmpty(acsImageScanResult) && (
           <Tab eventKey={0} title={<TabTitleText>Image Scan</TabTitleText>}>
-            <div style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}>
+            <div style={{ marginTop: 'var(--pf-t--global--spacer--sm)' }}>
               <ImageScanTitle />
               <ImageScanSummary />
               <ImageScanToolbar />
@@ -59,7 +59,7 @@ const AdvancedClusterSecurity: React.FC<AdvancedClusterSecurityProps> = (acsProp
         )}
         {!isEmpty(acsImageCheckResults) && (
           <Tab eventKey={1} title={<TabTitleText>Image Check</TabTitleText>}>
-            <div style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}>
+            <div style={{ marginTop: 'var(--pf-t--global--spacer--sm)' }}>
               <ImageCheckTitle />
               <ImageCheckSummary />
               <ImageCheckToolbar />
@@ -69,7 +69,7 @@ const AdvancedClusterSecurity: React.FC<AdvancedClusterSecurityProps> = (acsProp
         )}
         {!isEmpty(acsDeploymentCheckResults) && (
           <Tab eventKey={2} title={<TabTitleText>Deployment Check</TabTitleText>}>
-            <div style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}>
+            <div style={{ marginTop: 'var(--pf-t--global--spacer--sm)' }}>
               <DeploymentCheckTitle />
               <DeploymentCheckSummary />
               <DeploymentCheckToolbar />

diff --git a/...components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckSummary.tsx b/...components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckSummary.tsx
@@ -26,7 +26,10 @@ const DeploymentCheckSummary: React.FC = () => {
   return (
     <Flex justifyContent={{ default: 'justifyContentSpaceEvenly' }}>
       <FlexItem grow={{ default: 'grow' }}>
-        <Card isCompact style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>
+        <Card
+          isCompact
+          style={{ borderRadius: 0, marginBottom: 'var(--pf-t--global--spacer--sm)' }}
+        >
           <CardTitle>Violations by severity</CardTitle>
           <CardBody>
             <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
@@ -63,7 +66,7 @@ const DeploymentCheckSummary: React.FC = () => {
         </Card>
       </FlexItem>
       <FlexItem grow={{ default: 'grow' }}>
-        <Card isCompact>
+        <Card isCompact style={{ borderRadius: 0 }}>
           <CardTitle>Failing policy checks</CardTitle>
           <CardBody>
             <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>

diff --git a/...c/components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckTitle.tsx b/...c/components/Output/Tabs/AdvancedClusterSecurity/DeploymentCheck/DeploymentCheckTitle.tsx
@@ -1,20 +1,20 @@
-import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 import { useACSContext } from '../AdvancedClusterSecurityContext';
 
 const DeploymentCheckTitle: React.FC = () => {
   const { acsDeploymentCheckResults } = useACSContext();
 
   return (
-    <TextContent
+    <Content
       style={{
-        marginBottom: 'var(--pf-v5-global--spacer--sm)',
+        marginBottom: "var(--pf-t--global--spacer--sm)",
       }}
     >
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         This task returns ACS vulnerability deployment check results for deployment:{' '}
         {acsDeploymentCheckResults?.results?.[0]?.metadata?.additionalInfo?.name}
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   );
 };
 export default DeploymentCheckTitle;
diff --git a/...lines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckSummary.tsx b/...lines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckSummary.tsx
@@ -25,7 +25,10 @@ const ImageCheckSummary: React.FC = () => {
   return (
     <Flex flex={{ default: 'flex_1' }}>
       <FlexItem grow={{ default: 'grow' }}>
-        <Card isCompact style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>
+        <Card
+          isCompact
+          style={{ borderRadius: 0, marginBottom: 'var(--pf-t--global--spacer--sm)' }}
+        >
           <CardTitle>CVEs by severity</CardTitle>
           <CardBody>
             <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
@@ -62,7 +65,7 @@ const ImageCheckSummary: React.FC = () => {
         </Card>
       </FlexItem>
       <FlexItem grow={{ default: 'grow' }}>
-        <Card isCompact>
+        <Card isCompact style={{ borderRadius: 0 }}>
           <CardTitle>Failing policy checks</CardTitle>
           <CardBody>
             <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>

diff --git a/...pelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckTitle.tsx b/...pelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckTitle.tsx
@@ -1,16 +1,16 @@
-import { Text, TextContent, TextVariants, Button } from '@patternfly/react-core';
+import { Content, ContentVariants, Button } from '@patternfly/react-core';
 import { useACSContext } from '../AdvancedClusterSecurityContext';
 
 const ImageCheckTitle = () => {
   const { acsImageCheckResults } = useACSContext();
 
   return (
-    <TextContent
+    <Content
       style={{
-        marginBottom: 'var(--pf-v5-global--spacer--sm)',
+        marginBottom: "var(--pf-t--global--spacer--sm)",
       }}
     >
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         This task returns ACS vulnerability image check results for image:{' '}
         <Button
           variant="link"
@@ -26,8 +26,8 @@ const ImageCheckTitle = () => {
         >
           {acsImageCheckResults?.results?.[0]?.metadata?.additionalInfo?.name}
         </Button>
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   );
 };
 export default ImageCheckTitle;
diff --git a/...lines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckToolbar.tsx b/...lines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageCheck/ImageCheckToolbar.tsx
@@ -23,7 +23,7 @@ const ImageCheckToolbar: React.FC = () => {
 
   return (
     <Toolbar
-      style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}
+      style={{ marginTop: "var(--pf-t--global--spacer--sm)" }}
       className="pf-m-toggle-group-container"
       clearAllFilters={() => onClearAllFilters(SubTab.imageCheck)}
       data-testid="image-check-toolbar"

diff --git a/...s/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageScan/ImageScanRow.tsx b/...s/pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageScan/ImageScanRow.tsx
@@ -6,8 +6,8 @@ import {
   ExternalLinkAltIcon,
 } from '@patternfly/react-icons/dist/js/icons';
 import { Tbody, Td, Tr } from '@patternfly/react-table';
-import { global_success_color_100 as greenColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
-import { global_warning_color_100 as yellowColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import { t_global_color_status_success_100 as greenColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_100';
+import { t_global_color_status_warning_100 as yellowColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_warning_100';
 import { Vulnerability } from '../../../types';
 import { getSeverityWithIcon } from '../../../utils/summary-utils';
 
@@ -27,7 +27,7 @@ export const ImageScanRow: React.FC<ImageScanType> = ({ data, rowIndex }) => {
             iconPosition="right"
             icon={
               <ExternalLinkAltIcon
-                style={{ fontSize: 'var(--pf-v5-global--icon--FontSize--sm)' }}
+                style={{ fontSize: 'var(--pf-t--global--icon--size--font--xs)' }}
               />
             }
             component={(props) => (

diff --git a/...pelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageScan/ImageScanSummary.tsx b/...pelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageScan/ImageScanSummary.tsx
@@ -30,7 +30,10 @@ const ImageScanSummary: React.FC = () => {
   return (
     <Flex flex={{ default: 'flex_1' }} justifyContent={{ default: 'justifyContentSpaceEvenly' }}>
       <FlexItem grow={{ default: 'grow' }}>
-        <Card isCompact style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>
+        <Card
+          isCompact
+          style={{ borderRadius: 0, marginBottom: 'var(--pf-t--global--spacer--sm)' }}
+        >
           <CardTitle>CVEs by severity</CardTitle>
           <CardBody>
             <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
@@ -67,7 +70,7 @@ const ImageScanSummary: React.FC = () => {
         </Card>
       </FlexItem>
       <FlexItem grow={{ default: 'grow' }}>
-        <Card isCompact>
+        <Card isCompact style={{ borderRadius: 0 }}>
           <CardTitle>CVEs by status</CardTitle>
           <CardBody>
             <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
@@ -87,7 +90,7 @@ const ImageScanSummary: React.FC = () => {
       </FlexItem>
 
       <FlexItem grow={{ default: 'grow' }}>
-        <Card isCompact>
+        <Card isCompact style={{ borderRadius: 0 }}>
           <CardTitle>Total scan results</CardTitle>
           <CardBody>
             <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>

diff --git a/...pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageScan/ImageScanTitle.tsx b/...pipelines/src/components/Output/Tabs/AdvancedClusterSecurity/ImageScan/ImageScanTitle.tsx
@@ -1,16 +1,16 @@
-import { Button, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Button, Content, ContentVariants } from '@patternfly/react-core';
 import { useACSContext } from '../AdvancedClusterSecurityContext';
 
 const ImageScanTitle = () => {
   const { acsImageCheckResults } = useACSContext();
 
   return (
-    <TextContent
+    <Content
       style={{
-        marginBottom: 'var(--pf-v5-global--spacer--sm)',
+        marginBottom: "var(--pf-t--global--spacer--sm)",
       }}
     >
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         This task returns ACS vulnerability scan results for image:{' '}
         <Button
           variant="link"
@@ -26,8 +26,8 @@ const ImageScanTitle = () => {
         >
           {acsImageCheckResults?.results?.[0]?.metadata?.additionalInfo?.name}
         </Button>
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   );
 };
 export default ImageScanTitle;
diff --git a/packages/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractRow.tsx b/packages/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractRow.tsx
@@ -23,7 +23,7 @@ export const EnterpriseContractRow: React.FC<EnterpriseContractRowType> = ({ dat
 
   return (
     <Tbody isExpanded={rowExpanded} data-testid="row">
-      <Tr data-testid={`ec-row-${rowIndex}`}>
+      <Tr data-testid={`ec-row-${rowIndex}`} isBorderRow>
         <Td
           data-testid={`ec-row-expand-${rowIndex}`}
           expand={{

diff --git a/...ges/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractSummary.tsx b/...ges/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractSummary.tsx
@@ -16,8 +16,9 @@ const EnterpriseContractSummary: React.FC = () => {
   return (
     <Card
       style={{
+        borderRadius: 0,
         width: '250px',
-        marginBottom: 'var(--pf-v5-global--spacer--sm)',
+        marginBottom: 'var(--pf-t--global--spacer--sm)',
       }}
       isCompact
     >

diff --git a/packages/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractTitle.tsx b/packages/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractTitle.tsx
@@ -1,14 +1,14 @@
-import { Button, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Button, Content, ContentVariants } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons';
 
 const EnterpriseContractTitle = () => {
   return (
-    <TextContent
+    <Content
       style={{
-        marginBottom: 'var(--pf-v5-global--spacer--sm)',
+        marginBottom: "var(--pf-t--global--spacer--sm)",
       }}
     >
-      <Text component={TextVariants.p}>
+      <Content component={ContentVariants.p}>
         Enterprise Contract is a set of tools for verifying the provenance of application snapshots
         and validating them against a clearly defined policy.
         <br />
@@ -18,7 +18,7 @@ const EnterpriseContractTitle = () => {
           isInline
           iconPosition="right"
           icon={
-            <ExternalLinkAltIcon style={{ fontSize: 'var(--pf-v5-global--icon--FontSize--sm)' }} />
+            <ExternalLinkAltIcon style={{ fontSize: "var(--pf-t--global--icon--size--font--xs)" }} />
           }
           component={(props) => (
             <a
@@ -36,7 +36,7 @@ const EnterpriseContractTitle = () => {
           variant="link"
           style={{ padding: 0 }}
           icon={
-            <ExternalLinkAltIcon style={{ fontSize: 'var(--pf-v5-global--icon--FontSize--sm)' }} />
+            <ExternalLinkAltIcon style={{ fontSize: "var(--pf-t--global--icon--size--font--xs)" }} />
           }
           iconPosition="right"
           component={(props) => (
@@ -58,14 +58,14 @@ const EnterpriseContractTitle = () => {
             padding: 0,
           }}
           icon={
-            <ExternalLinkAltIcon style={{ fontSize: 'var(--pf-v5-global--icon--FontSize--sm)' }} />
+            <ExternalLinkAltIcon style={{ fontSize: "var(--pf-t--global--icon--size--font--xs)" }} />
           }
           iconPosition="right"
         >
           Pipeline Policy
         </Button>
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   );
 };
 export default EnterpriseContractTitle;
diff --git a/...ges/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractToolbar.tsx b/...ges/pipelines/src/components/Output/Tabs/EnterpriseContract/EnterpriseContractToolbar.tsx
@@ -24,7 +24,7 @@ const EnterpriseContractToolbar: React.FC = () => {
           <StatusFilter data={statusFilterObj} />
         </ToolbarItem>
 
-        <ToolbarItem widths={{ default: '300px' }} className="pf-v5-u-ml-0">
+        <ToolbarItem>
           <NameFilter
             filter={nameFilter}
             updateFilter={updateNameFilter}

diff --git a/packages/pipelines/src/components/Output/Tabs/Others/HandleUrls.tsx b/packages/pipelines/src/components/Output/Tabs/Others/HandleUrls.tsx
@@ -20,7 +20,7 @@ export const handleURLs = (value: string): React.ReactNode => {
           variant="link"
           style={{ padding: 0 }}
           icon={
-            <ExternalLinkAltIcon style={{ fontSize: 'var(--pf-v5-global--icon--FontSize--sm)' }} />
+            <ExternalLinkAltIcon style={{ fontSize: "var(--pf-t--global--icon--size--font--xs)" }} />
           }
           iconPosition="right"
           component={(props) => (

diff --git a/packages/pipelines/src/components/Output/Toolbar/ComponentFilter.tsx b/packages/pipelines/src/components/Output/Toolbar/ComponentFilter.tsx
@@ -71,10 +71,10 @@ const ComponentFilter = <T extends object>({
 
   return (
     <ToolbarFilter
-      chips={componentFilters}
+      labels={componentFilters}
       categoryName={ToolBarFilterId.component}
-      deleteChip={onDeleteChip}
-      deleteChipGroup={onDeleteChipComponentGroup}
+      deleteLabel={onDeleteChip}
+      deleteLabelGroup={onDeleteChipComponentGroup}
     >
       <Select
         isScrollable

diff --git a/packages/pipelines/src/components/Output/Toolbar/CveIdFilter.tsx b/packages/pipelines/src/components/Output/Toolbar/CveIdFilter.tsx
@@ -46,12 +46,12 @@ const CveIdFilter: React.FC<CveIdFilterType> = ({ data: CveIdFilterObj = {} }) =
 
   return (
     <ToolbarFilter
-      chips={cveIdFilters}
+      labels={cveIdFilters}
       categoryName={{
         key: ToolBarFilterId.acsImageScanCveID,
         name: 'CVE ID',
       }}
-      deleteChip={onDeleteChip}
+      deleteLabel={onDeleteChip}
     >
       <Select
         isScrollable