Upgrade to PatternFly v5

packit · Oct 18, 2023 · 0bba98f · 0bba98f
1 parent f03f2ed
commit 0bba98f
Show file tree

Hide file tree

Showing 24 changed files with 279 additions and 338 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@patternfly/react-charts": "^6.94.19",
-    "@patternfly/react-core": "^4.276.8",
-    "@patternfly/react-icons": "^4.93.6",
-    "@patternfly/react-log-viewer": "^4.87.100",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.113.0",
+    "@patternfly/patternfly": "^5.1.0",
+    "@patternfly/react-charts": "^7.1.1",
+    "@patternfly/react-core": "^5.1.1",
+    "@patternfly/react-icons": "^5.1.1",
+    "@patternfly/react-log-viewer": "^5",
+    "@patternfly/react-styles": "5.1.1",
+    "@patternfly/react-table": "5.1.1",
     "@tanstack/react-query": "^4.29.7",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "@patternfly/react-core/dist/styles/base.css";
+import "@patternfly/patternfly/patternfly-addons.css";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { routes } from "./app/routes";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

diff --git a/frontend/src/app/AppLayout/AppLayout.tsx b/frontend/src/app/AppLayout/AppLayout.tsx
@@ -26,6 +26,7 @@ import {
     ToolbarContent,
     ToolbarItem,
     NavExpandable,
+    PageSidebarBody,
 } from "@patternfly/react-core";
 import { routes } from "../routes";
 import packitLogo from "../../static/logo.png";
@@ -72,7 +73,7 @@ const AppLayout = () => {
     const headerToolbar = (
         <Toolbar id="header-toolbar">
             <ToolbarContent>
-                <ToolbarItem alignment={{ default: "alignRight" }}>
+                <ToolbarItem align={{ default: "alignRight" }}>
                     <Popover
                         headerContent={"About open source"}
                         flipBehavior={["bottom-end"]}
@@ -117,15 +118,17 @@ const AppLayout = () => {
                 <PageToggleButton
                     variant="plain"
                     aria-label="Global navigation"
-                    isNavOpen={isNavOpen}
-                    onNavToggle={isMobileView ? onNavToggleMobile : onNavToggle}
+                    isSidebarOpen={isNavOpen}
+                    onSidebarToggle={
+                        isMobileView ? onNavToggleMobile : onNavToggle
+                    }
                     id="vertical-nav-toggle"
                 >
                     <BarsIcon />
                 </PageToggleButton>
             </MastheadToggle>
             <MastheadMain>
-                <MastheadBrand href="/">
+                <MastheadBrand component="a" href="/">
                     <img
                         src={packitLogo}
                         style={{ height: "60px" }}
@@ -224,9 +227,10 @@ const AppLayout = () => {
     const Sidebar = (
         <PageSidebar
             theme="dark"
-            nav={Navigation}
-            isNavOpen={isMobileView ? isNavOpenMobile : isNavOpen}
-        />
+            isSidebarOpen={isMobileView ? isNavOpenMobile : isNavOpen}
+        >
+            <PageSidebarBody>{Navigation}</PageSidebarBody>
+        </PageSidebar>
     );
     const PageSkipToContent = (
         <SkipToContent href="#primary-app-container">
@@ -238,7 +242,7 @@ const AppLayout = () => {
             mainContainerId="primary-app-container"
             header={Header}
             sidebar={Sidebar}
-            onPageResize={onPageResize}
+            onPageResize={(_event, props: any) => onPageResize(props)}
             skipToContent={PageSkipToContent}
         >
             <Outlet />

diff --git a/frontend/src/app/Errors/ErrorApp.tsx b/frontend/src/app/Errors/ErrorApp.tsx
@@ -7,8 +7,9 @@ import {
     EmptyState,
     EmptyStateBody,
     EmptyStateIcon,
-    EmptyStateSecondaryActions,
-    Title,
+    EmptyStateActions,
+    EmptyStateHeader,
+    EmptyStateFooter,
 } from "@patternfly/react-core";
 import React from "react";
 
@@ -50,36 +51,44 @@ const ErrorApp = () => {
 
     return (
         <EmptyState isFullHeight>
-            <EmptyStateIcon icon={ExclamationCircleIcon} color="#C9190B" />
-            <Title headingLevel="h1" size="lg">
-                Exception occured that caused the website to crash
-            </Title>
+            <EmptyStateHeader
+                titleText="Exception occured that caused the website to crash"
+                icon={
+                    <EmptyStateIcon
+                        icon={ExclamationCircleIcon}
+                        color="#C9190B"
+                    />
+                }
+                headingLevel="h1"
+            />
             <EmptyStateBody>
                 If possible, take this callstack and report it upstream so it
                 can be fixed. When reporting, specify the reproducer on how the
                 bug happened.
             </EmptyStateBody>
-            <Button
-                variant="primary"
-                component="a"
-                href="https://github.com/packit/dashboard/issues/new?title=Dashboard+crashed"
-                target="_blank"
-                rel="noreferrer"
-            >
-                Report the issue
-            </Button>
-            <EmptyStateSecondaryActions>
-                <Button variant="link" component="a" href="/">
-                    Go back to Packit website
+            <EmptyStateFooter>
+                <Button
+                    variant="primary"
+                    component="a"
+                    href="https://github.com/packit/dashboard/issues/new?title=Dashboard+crashed"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Report the issue
                 </Button>
-            </EmptyStateSecondaryActions>
-            <EmptyStateBody>
-                <CodeBlock actions={actions}>
-                    <CodeBlockCode id="code-content">
-                        {error?.toString() ?? "Unknown error"}
-                    </CodeBlockCode>
-                </CodeBlock>
-            </EmptyStateBody>
+                <EmptyStateActions>
+                    <Button variant="link" component="a" href="/">
+                        Go back to Packit website
+                    </Button>
+                </EmptyStateActions>
+                <EmptyStateBody>
+                    <CodeBlock actions={actions}>
+                        <CodeBlockCode id="code-content">
+                            {error?.toString() ?? "Unknown error"}
+                        </CodeBlockCode>
+                    </CodeBlock>
+                </EmptyStateBody>
+            </EmptyStateFooter>
         </EmptyState>
     );
 };

diff --git a/frontend/src/app/Errors/ErrorConnection.tsx b/frontend/src/app/Errors/ErrorConnection.tsx
@@ -3,20 +3,18 @@ import {
     EmptyStateIcon,
     EmptyStateVariant,
     EmptyStateBody,
-    Title,
     Icon,
+    EmptyStateHeader,
 } from "@patternfly/react-core";
 
 import { ExclamationTriangleIcon } from "@patternfly/react-icons";
 
 const ErrorConnection = () => (
-    <EmptyState variant={EmptyStateVariant.small}>
+    <EmptyState variant={EmptyStateVariant.sm}>
         <Icon>
             <EmptyStateIcon icon={ExclamationTriangleIcon} color="#f0ab00" />
         </Icon>
-        <Title headingLevel="h2" size="lg">
-            Unable to connect
-        </Title>
+        <EmptyStateHeader titleText="Unable to connect" headingLevel="h2" />
         <EmptyStateBody>There was an error retrieving data.</EmptyStateBody>
     </EmptyState>
 );

diff --git a/frontend/src/app/Jobs/CoprBuildsTable.tsx b/frontend/src/app/Jobs/CoprBuildsTable.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo } from "react";
 
+import { TableVariant, cellWidth, IRow } from "@patternfly/react-table";
 import {
     Table,
     TableHeader,
     TableBody,
-    TableVariant,
-    cellWidth,
-    IRow,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
 import { TriggerLink } from "../Trigger/TriggerLink";
@@ -75,7 +73,7 @@ const CoprBuildsTable = () => {
     // Headings
     const columns = [
         {
-            title: <span className="pf-u-screen-reader">Forge</span>,
+            title: <span className="pf-v5-u-screen-reader">Forge</span>,
         }, // space for forge icon
         { title: "Trigger", transforms: [cellWidth(15)] },
         { title: "Chroots", transforms: [cellWidth(60)] },

diff --git a/frontend/src/app/Jobs/KojiBuildsTable.tsx b/frontend/src/app/Jobs/KojiBuildsTable.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo } from "react";
 
+import { TableVariant, cellWidth, IRow } from "@patternfly/react-table";
 import {
     Table,
     TableHeader,
     TableBody,
-    TableVariant,
-    cellWidth,
-    IRow,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
 import { TriggerLink } from "../Trigger/TriggerLink";
@@ -40,7 +38,7 @@ const KojiBuildsTable = () => {
     // Headings
     const columns = [
         {
-            title: <span className="pf-u-screen-reader">Forge</span>,
+            title: <span className="pf-v5-u-screen-reader">Forge</span>,
         }, // space for forge icon
         { title: "Trigger", transforms: [cellWidth(35)] },
         { title: "Target", transforms: [cellWidth(20)] },

diff --git a/frontend/src/app/Jobs/SRPMBuildsTable.tsx b/frontend/src/app/Jobs/SRPMBuildsTable.tsx
@@ -1,13 +1,11 @@
 import { useMemo } from "react";
 
+import { TableVariant, cellWidth, IRow } from "@patternfly/react-table";
 import {
     Table,
     TableHeader,
     TableBody,
-    TableVariant,
-    cellWidth,
-    IRow,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
 
@@ -37,7 +35,7 @@ const SRPMBuildsTable = () => {
     // Headings
     const columns = [
         {
-            title: <span className="pf-u-screen-reader">Forge</span>,
+            title: <span className="pf-v5-u-screen-reader">Forge</span>,
         }, // space for forge icon
         { title: "Trigger", transforms: [cellWidth(50)] },
         { title: "Results", transforms: [cellWidth(20)] },

diff --git a/frontend/src/app/Jobs/SyncReleaseStatuses.tsx b/frontend/src/app/Jobs/SyncReleaseStatuses.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo } from "react";
 
+import { TableVariant, cellWidth, IRow } from "@patternfly/react-table";
 import {
     Table,
     TableHeader,
     TableBody,
-    TableVariant,
-    cellWidth,
-    IRow,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
 import { TriggerLink } from "../Trigger/TriggerLink";
@@ -72,7 +70,7 @@ const SyncReleaseTable: React.FC<SyncReleaseTableProps> = ({ job }) => {
     // Headings
     const columns = [
         {
-            title: <span className="pf-u-screen-reader">Forge</span>,
+            title: <span className="pf-v5-u-screen-reader">Forge</span>,
         }, // space for forge icon
         { title: "Trigger", transforms: [cellWidth(25)] },
         { title: "Targets", transforms: [cellWidth(60)] },

diff --git a/frontend/src/app/Jobs/TestingFarmResultsTable.tsx b/frontend/src/app/Jobs/TestingFarmResultsTable.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo } from "react";
 
+import { TableVariant, cellWidth, IRow } from "@patternfly/react-table";
 import {
     Table,
     TableHeader,
     TableBody,
-    TableVariant,
-    cellWidth,
-    IRow,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 
 import { Button } from "@patternfly/react-core";
 

diff --git a/frontend/src/app/Pipelines/PipelinesTable.tsx b/frontend/src/app/Pipelines/PipelinesTable.tsx
@@ -1,13 +1,11 @@
 import React, { useMemo } from "react";
 
+import { TableVariant, cellWidth, IRow } from "@patternfly/react-table";
 import {
     Table,
     TableHeader,
     TableBody,
-    TableVariant,
-    cellWidth,
-    IRow,
-} from "@patternfly/react-table";
+} from "@patternfly/react-table/deprecated";
 
 import { Button, LabelGroup } from "@patternfly/react-core";
 import { TriggerLink } from "../Trigger/TriggerLink";