plugin(tekton): upgrade to PatternFly V6 (#2178)

* plugin(tekton): upgrade to PatternFly V6 also upgrade to the latest version of aonic-ui/pipelines. Signed-off-by: Bryan Ramos <[email protected]> * Remove non-existing, old dependencies Signed-off-by: Bryan Ramos <[email protected]> --------- Signed-off-by: Bryan Ramos <[email protected]>
backstage · Jan 2, 2025 · e9600c4 · e9600c4
1 parent edf66a3
commit e9600c4
Show file tree

Hide file tree

Showing 19 changed files with 101 additions and 84 deletions.
diff --git a/workspaces/tekton/.changeset/wise-baboons-warn.md b/workspaces/tekton/.changeset/wise-baboons-warn.md
@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-tekton': minor
+---
+
+Update Patternfly Dependencies to V6 and also use the latest version of aonic-ui/pipelines.
diff --git a/workspaces/tekton/plugins/tekton/package.json b/workspaces/tekton/plugins/tekton/package.json
@@ -34,7 +34,7 @@
     "prepublish": "./fix-style-inject-imports.sh"
   },
   "dependencies": {
-    "@aonic-ui/pipelines": "^1.1.1",
+    "@aonic-ui/pipelines": "^3.0.0",
     "@backstage-community/plugin-tekton-common": "workspace:^",
     "@backstage/catalog-model": "^1.7.0",
     "@backstage/core-components": "^0.15.1",
@@ -51,11 +51,11 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.45",
     "@mui/icons-material": "5.15.17",
-    "@patternfly/patternfly": "^5.1.0",
+    "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-charts": "^7.1.1",
-    "@patternfly/react-core": "^5.1.2",
-    "@patternfly/react-tokens": "^5.1.2",
-    "@patternfly/react-topology": "^5.1.0",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-tokens": "^6.0.0",
+    "@patternfly/react-topology": "^6.0.0",
     "classnames": "^2.3.2",
     "dagre": "^0.8.5",
     "lodash": "^4.17.21",

diff --git a/workspaces/tekton/plugins/tekton/src/components/Icons/CriticalRiskIcon.tsx b/workspaces/tekton/plugins/tekton/src/components/Icons/CriticalRiskIcon.tsx
@@ -15,7 +15,7 @@
  */
 import * as React from 'react';
 
-import { global_palette_red_200 as criticalColor } from '@patternfly/react-tokens/dist/js/global_palette_red_200';
+import { t_color_red_60 as criticalColor } from '@patternfly/react-tokens/dist/js/t_color_red_60';
 
 const CriticalRiskIcon = ({
   className,

diff --git a/workspaces/tekton/plugins/tekton/src/components/Icons/EqualsIcon.tsx b/workspaces/tekton/plugins/tekton/src/components/Icons/EqualsIcon.tsx
@@ -15,7 +15,7 @@
  */
 import * as React from 'react';
 
-import { global_palette_gold_400 as mediumColor } from '@patternfly/react-tokens/dist/js/global_palette_gold_400';
+import { t_color_yellow_40 as mediumColor } from '@patternfly/react-tokens/dist/js/t_color_yellow_40';
 
 const EqualsIcon = ({
   className,

diff --git a/workspaces/tekton/plugins/tekton/src/components/Icons/LinkToSbomIcon.tsx b/workspaces/tekton/plugins/tekton/src/components/Icons/LinkToSbomIcon.tsx
@@ -21,7 +21,7 @@ import classNames from 'classnames';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     icon: {
-      fill: 'var(--pf-v5-global--Color--100)',
+      fill: 'var(--pf-t--global--icon--color--100)',
     },
     disabledButton: {
       fill: theme.palette.grey[600],

diff --git a/workspaces/tekton/plugins/tekton/src/components/Icons/OutputIcon.tsx b/workspaces/tekton/plugins/tekton/src/components/Icons/OutputIcon.tsx
@@ -21,7 +21,7 @@ import classNames from 'classnames';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     icon: {
-      fill: 'var(--pf-v5-global--Color--100)',
+      fill: 'var(--pf-t--global--icon--color--100)',
     },
     disabledButton: {
       fill: theme.palette.grey[600],

diff --git a/workspaces/tekton/plugins/tekton/src/components/Icons/ViewLogsIcon.tsx b/workspaces/tekton/plugins/tekton/src/components/Icons/ViewLogsIcon.tsx
@@ -21,7 +21,7 @@ import classNames from 'classnames';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     icon: {
-      fill: 'var(--pf-v5-global--Color--100)',
+      fill: 'var(--pf-t--global--icon--color--100)',
     },
     disabledButton: {
       fill: theme.palette.grey[600],

diff --git a/...paces/tekton/plugins/tekton/src/components/PipelineRunList/PipelineRunVulnerabilities.tsx b/...paces/tekton/plugins/tekton/src/components/PipelineRunList/PipelineRunVulnerabilities.tsx
@@ -19,8 +19,8 @@ import { makeStyles, Theme } from '@material-ui/core';
 import AngleDoubleDownIcon from '@mui/icons-material/KeyboardDoubleArrowDownOutlined';
 import AngleDoubleUpIcon from '@mui/icons-material/KeyboardDoubleArrowUpOutlined';
 import { Tooltip } from '@patternfly/react-core';
-import { global_palette_gold_400 as mediumColor } from '@patternfly/react-tokens/dist/js/global_palette_gold_400';
-import { global_palette_orange_300 as highColor } from '@patternfly/react-tokens/dist/js/global_palette_orange_300';
+import { t_color_yellow_40 as mediumColor } from '@patternfly/react-tokens/dist/js/t_color_yellow_40';
+import { t_color_orange_40 as highColor } from '@patternfly/react-tokens/dist/js/t_color_orange_40';
 import classNames from 'classnames';
 
 import { PipelineRunKind } from '@janus-idp/shared-react';

diff --git a/workspaces/tekton/plugins/tekton/src/components/PipelineRunList/ResourceBadge.css b/workspaces/tekton/plugins/tekton/src/components/PipelineRunList/ResourceBadge.css
@@ -9,7 +9,7 @@
   min-width: 24px;
   padding: 0 7px;
   border-radius: 20px;
-  color: var(--pf-v5-global--palette--white);
+  color: var(--pf-t--color--white);
   display: inline-block;
   text-align: center;
   white-space: nowrap;

diff --git a/workspaces/tekton/plugins/tekton/src/components/PipelineRunList/ResourceBadge.tsx b/workspaces/tekton/plugins/tekton/src/components/PipelineRunList/ResourceBadge.tsx
@@ -32,7 +32,7 @@ const ResourceBadge = ({
 }) => {
   return (
     <Split className="bs-tkn-pipeline-visualization__label">
-      <SplitItem style={{ marginRight: 'var(--pf-v5-global--spacer--sm)' }}>
+      <SplitItem style={{ marginRight: 'var(--pf-t--global--spacer--sm)' }}>
         <span className="badge" style={{ backgroundColor: color }}>
           {abbr}
         </span>
@@ -41,7 +41,7 @@ const ResourceBadge = ({
         <span>{name}</span>
       </SplitItem>
       {suffix ? (
-        <SplitItem style={{ marginLeft: 'var(--pf-v5-global--spacer--sm)' }}>
+        <SplitItem style={{ marginLeft: 'var(--pf-t--global--spacer--sm)' }}>
           {suffix}
         </SplitItem>
       ) : null}

diff --git a/workspaces/tekton/plugins/tekton/src/components/PipelineRunLogs/PodLogsDownloadLink.tsx b/workspaces/tekton/plugins/tekton/src/components/PipelineRunLogs/PodLogsDownloadLink.tsx
@@ -36,8 +36,8 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     downloadAction: {
       position: 'relative',
-      marginBottom: 'var(--pf-v5-global--spacer--sm)',
-      color: 'var(--pf-v5-global--color--100)',
+      marginBottom: 'var(--pf-t--global--spacer--sm)',
+      color: 'var(--pf-t--global--icon--color--100)',
       cursor: 'pointer',
     },
     buttonDisabled: {

diff --git a/workspaces/tekton/plugins/tekton/src/components/Tekton/TektonCIComponent.tsx b/workspaces/tekton/plugins/tekton/src/components/Tekton/TektonCIComponent.tsx
@@ -24,8 +24,6 @@ import PermissionAlert from '../common/PermissionAlert';
 import PipelineRunList from '../PipelineRunList/PipelineRunList';
 
 import '@patternfly/react-core/dist/styles/base.css';
-import '@patternfly/patternfly/patternfly-theme-dark.css';
-import '@patternfly/patternfly/patternfly-charts-theme-dark.css';
 import '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
 
 const savedStylesheets = new Set<HTMLLinkElement>();

diff --git a/workspaces/tekton/plugins/tekton/src/components/common/ResourceStatus.css b/workspaces/tekton/plugins/tekton/src/components/common/ResourceStatus.css
@@ -1,5 +1,5 @@
 .bs-tkn-resource-status {
-  padding-left: var(--pf-v5-global--spacer--sm);
+  padding-left: var(--pf-t--global--spacer--sm);
   white-space: nowrap;
 }
 

diff --git a/workspaces/tekton/plugins/tekton/src/components/pipeline-topology/PipelineVisualization.css b/workspaces/tekton/plugins/tekton/src/components/pipeline-topology/PipelineVisualization.css
@@ -1,6 +1,6 @@
 .bs-tkn-pipeline-visualization__label {
   align-items: baseline;
-  padding-bottom: var(--pf-v5-global--spacer--xs);
+  padding-bottom: var(--pf-t--global--spacer--xs);
 }
 
 .bs-tkn-pipeline-visualization__label .badge {
@@ -10,7 +10,7 @@
   min-width: 24px;
   padding: 0 7px;
   border-radius: 20px;
-  color: var(--pf-v5-global--palette--white);
+  color: var(--pf-t--color--white);
   display: inline-block;
   text-align: center;
   white-space: nowrap;

diff --git a/.../tekton/plugins/tekton/src/components/pipeline-topology/PipelineVisualizationStepList.css b/.../tekton/plugins/tekton/src/components/pipeline-topology/PipelineVisualizationStepList.css
@@ -3,9 +3,9 @@
 }
 
 .bs-tkn-pipeline-visualization-step-list__task-name {
-  font-weight: var(--pf-v5-global--FontWeight--bold);
-  line-height: var(--pf-v5-global--spacer--lg);
-  max-height: var(--pf-v5-global--spacer--2xl);
+  font-weight: var(--pf-t--global--font--weight--heading);
+  line-height: var(--pf-t--global--spacer--lg);
+  max-height: var(--pf-t--global--spacer--2xl);
   max-width: 15em;
   margin: 0 auto 10px auto;
 
@@ -16,18 +16,18 @@
 }
 
 .bs-tkn-pipeline-visualization-step-list__task-type {
-  line-height: var(--pf-v5-global--spacer--xs);
-  max-height: var(--pf-v5-global--spacer--2xl);
+  line-height: var(--pf-t--global--spacer--xs);
+  max-height: var(--pf-t--global--spacer--2xl);
   margin: 0 auto 10px auto;
 }
 
 .bs-tkn-pipeline-visualization-step-list__step {
   display: flex;
-  margin-bottom: var(--pf-v5-global--spacer--xs);
+  margin-bottom: var(--pf-t--global--spacer--xs);
 }
 
 .bs-tkn-pipeline-visualization-step-list__step--task-run {
-  margin-bottom: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-t--global--spacer--sm);
 }
 
 .bs-tkn-pipeline-visualization-step-list__step:last-child {
@@ -43,25 +43,25 @@
 }
 
 .bs-tkn-pipeline-visualization-step-list__icon-backdrop {
-  fill: var(--pf-v5-global--Color--light-100);
+  fill: var(--pf-t--color--white);
 }
 
 .bs-tkn-pipeline-visualization-step-list__name {
   flex: 1 1 auto;
   overflow: hidden;
-  padding-left: var(--pf-v5-global--spacer--sm);
+  padding-left: var(--pf-t--global--spacer--sm);
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .bs-tkn-pipeline-visualization-step-list__name.is-main-focus {
-  padding: 0 var(--pf-v5-global--spacer--sm);
+  padding: 0 var(--pf-t--global--spacer--sm);
   text-align: center;
 }
 
 .bs-tkn-pipeline-visualization-step-list__duration {
   flex: 0 0 auto;
-  padding-left: var(--pf-v5-global--spacer--sm);
+  padding-left: var(--pf-t--global--spacer--sm);
   text-align: right;
 }
diff --git a/workspaces/tekton/plugins/tekton/src/hooks/useDarkTheme.test.ts b/workspaces/tekton/plugins/tekton/src/hooks/useDarkTheme.test.ts
@@ -33,7 +33,7 @@ describe('useDarkTheme', () => {
     });
     renderHook(() => useDarkTheme());
     const htmlTagElement = document.documentElement;
-    expect(htmlTagElement.classList.contains('pf-v5-theme-dark')).toBe(true);
+    expect(htmlTagElement.classList.contains('pf-v6-theme-dark')).toBe(true);
   });
 
   it('should remove dark theme class from html tag', () => {
@@ -44,6 +44,6 @@ describe('useDarkTheme', () => {
     });
     renderHook(() => useDarkTheme());
     const htmlTagElement = document.documentElement;
-    expect(htmlTagElement.classList.contains('pf-v5-theme-dark')).toBe(false);
+    expect(htmlTagElement.classList.contains('pf-v6-theme-dark')).toBe(false);
   });
 });
diff --git a/workspaces/tekton/plugins/tekton/src/hooks/useDarkTheme.ts b/workspaces/tekton/plugins/tekton/src/hooks/useDarkTheme.ts
@@ -18,7 +18,7 @@ import React from 'react';
 import { useTheme } from '@material-ui/core/styles';
 
 const THEME_DARK = 'dark';
-const THEME_DARK_CLASS = 'pf-v5-theme-dark';
+const THEME_DARK_CLASS = 'pf-v6-theme-dark';
 
 export const useDarkTheme = () => {
   const {

diff --git a/workspaces/tekton/plugins/tekton/tests/tekton.spec.ts b/workspaces/tekton/plugins/tekton/tests/tekton.spec.ts
@@ -140,7 +140,7 @@ test.describe('Tekton plugin', () => {
       await expect(card).toContainText('Enterprise Contract is a set of tools');
 
       // check the summary
-      const summary = card.locator('.pf-v5-c-card');
+      const summary = card.locator('.pf-v6-c-card');
       await expect(summary.getByText('Summary')).toBeVisible();
       await expect(summary.getByText('Failed')).toBeVisible();
       await expect(summary.getByText('Success')).toBeVisible();
@@ -297,7 +297,7 @@ async function checkCards(
   columns: string[],
 ) {
   // check the violations summary
-  const sections = base.locator('.pf-v5-c-card:visible');
+  const sections = base.locator('.pf-v6-c-card:visible');
   for (const item of sectionTitles) {
     await expect(sections.filter({ hasText: item })).toBeVisible();
   }