[0.11.x] Migration Patternfly 4 to 5: Fixes Hyperfoil#714

johnaohara · Jan 30, 2024 · 397b0d7 · 397b0d7
1 parent 686ddc3
commit 397b0d7
Show file tree

Hide file tree

Showing 84 changed files with 1,439 additions and 1,133 deletions.
diff --git a/horreum-web/package-lock.json b/horreum-web/package-lock.json
diff --git a/horreum-web/package.json b/horreum-web/package.json
@@ -5,9 +5,9 @@
   "type": "module",
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
-    "@patternfly/patternfly": "4.224.4",
-    "@patternfly/react-core": "4.277.0",
-    "@patternfly/react-table": "4.113.5",
+    "@patternfly/patternfly": "5.1.0",
+    "@patternfly/react-core": "5.1.1",
+    "@patternfly/react-table": "5.1.1",
     "@types/history": "4.7.11",
     "@types/jsonpath": "0.2.4",
     "@types/luxon": "3.2.0",

diff --git a/horreum-web/src/About.tsx b/horreum-web/src/About.tsx
@@ -1,7 +1,20 @@
 import { useState, useEffect } from "react"
-import { Bullseye, Button, Dropdown, DropdownItem, DropdownToggle, Modal, Spinner } from "@patternfly/react-core"
+import {
+	Bullseye,
+	Button,
+	Modal,
+	Spinner
+} from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	DropdownToggle
+} from '@patternfly/react-core/deprecated';
 import { QuestionCircleIcon } from "@patternfly/react-icons"
-import { Table, TableBody } from "@patternfly/react-table"
+import {
+	Table,
+	TableBody
+} from '@patternfly/react-table/deprecated';
 
 import { configApi } from "./api"
 import { formatDateTime } from "./utils"
@@ -36,7 +49,7 @@ export default function About() {
                 menuAppendTo="parent"
                 onSelect={() => setDropdownOpen(false)}
                 toggle={
-                    <DropdownToggle toggleIndicator={null} onToggle={setDropdownOpen} id="toggle-icon-only">
+                    <DropdownToggle toggleIndicator={null} onToggle={(_event, val) => setDropdownOpen(val)} id="toggle-icon-only">
                         <QuestionCircleIcon style={{ fill: "#ffffff" }} />
                     </DropdownToggle>
                 }

diff --git a/horreum-web/src/App.tsx b/horreum-web/src/App.tsx
@@ -1,6 +1,15 @@
 import "@patternfly/patternfly/patternfly.css" //have to use this import to customize scss-variables.scss
 
-import {Nav, NavItem, NavList, Page, PageHeader, PageHeaderTools} from "@patternfly/react-core"
+import {
+	Nav,
+	NavItem,
+	NavList,
+	Page
+} from '@patternfly/react-core';
+import {
+	PageHeader,
+	PageHeaderTools
+} from '@patternfly/react-core/deprecated';
 
 import {NavLink, Route, Routes} from "react-router-dom"
 import {Router} from "react-router"

diff --git a/horreum-web/src/components/AccessIcon.tsx b/horreum-web/src/components/AccessIcon.tsx
@@ -8,25 +8,25 @@ export default function AccessIcon({ access }: { access: Access }) {
     let explanation
     switch (access) {
         case Access.Public: {
-            color = "--pf-global--success-color--200"
+            color = "--pf-v5-global--success-color--200"
             text = "Public"
             explanation = "Anyone can view this."
             break
         }
         case Access.Protected: {
-            color = "--pf-global--warning-color--100"
+            color = "--pf-v5-global--warning-color--100"
             text = "Protected"
             explanation = "Only authenticated (logged in) users can view this."
             break
         }
         case Access.Private: {
-            color = "--pf-global--danger-color--100"
+            color = "--pf-v5-global--danger-color--100"
             text = "Private"
             explanation = "Only users from the owning team can view this."
             break
         }
         default: {
-            color = "--pf-global--icon--Color--light"
+            color = "--pf-v5-global--icon--Color--light"
             text = "Unknown"
             explanation = "Unknown"
             break

diff --git a/horreum-web/src/components/AccessIconOnly.tsx b/horreum-web/src/components/AccessIconOnly.tsx
@@ -7,22 +7,22 @@ export default function AccessIcon({ access }: { access: Access }) {
     let explanation
     switch (access) {
         case Access.Public: {
-            color = "--pf-global--success-color--200"
+            color = "--pf-v5-global--success-color--200"
             explanation = "Anyone can view this."
             break
         }
         case Access.Protected: {
-            color = "--pf-global--warning-color--100"
+            color = "--pf-v5-global--warning-color--100"
             explanation = "Only authenticated (logged in) users can view this."
             break
         }
         case Access.Private: {
-            color = "--pf-global--danger-color--100"
+            color = "--pf-v5-global--danger-color--100"
             explanation = "Only users from the owning team can view this."
             break
         }
         default: {
-            color = "--pf-global--icon--Color--light"
+            color = "--pf-v5-global--icon--Color--light"
             explanation = "Unknown"
             break
         }

diff --git a/horreum-web/src/components/ActionMenu.tsx b/horreum-web/src/components/ActionMenu.tsx
@@ -1,6 +1,10 @@
 import { useState, useEffect, ReactElement, ReactNode } from "react"
 
-import { Dropdown, DropdownItem, KebabToggle } from "@patternfly/react-core"
+import {
+	Dropdown,
+	DropdownItem,
+	KebabToggle
+} from '@patternfly/react-core/deprecated';
 
 import { useTester } from "../auth"
 import { Access } from "../api"

diff --git a/horreum-web/src/components/ButtonLink.tsx b/horreum-web/src/components/ButtonLink.tsx
@@ -4,5 +4,5 @@ export default function ButtonLink(
     props: NavLinkProps & { variant?: "primary" | "secondary" | "tertiary" | "control"; isDisabled?: boolean }
 ) {
     const variant = props.variant || "primary"
-    return <NavLink className={"pf-c-button pf-m-" + variant + (props.isDisabled ? " pf-m-disabled" : "")} {...props} />
+    return <NavLink className={"pf-v5-c-button pf-m-" + variant + (props.isDisabled ? " pf-m-disabled" : "")} {...props} />
 }
diff --git a/horreum-web/src/components/ConditionComponent.tsx b/horreum-web/src/components/ConditionComponent.tsx
@@ -1,4 +1,7 @@
-import { Alert, FormGroup, Switch } from "@patternfly/react-core"
+import { Alert, FormGroup, Switch,
+    HelperText,
+    HelperTextItem,
+    FormHelperText } from "@patternfly/react-core"
 import { ConditionComponent as ConditionComponentDef } from "../api"
 import LogSlider from "./LogSlider"
 import EnumSelect from "./EnumSelect"
@@ -58,7 +61,7 @@ export default function ConditionComponent({ value, onChange, properties, isTest
                     labelOff="OFF"
                     isDisabled={!isTester}
                     isChecked={value}
-                    onChange={checked => onChange(checked)}
+                    onChange={(_event, checked) => onChange(checked)}
                 />
             )
             break
@@ -67,7 +70,12 @@ export default function ConditionComponent({ value, onChange, properties, isTest
             break
     }
     return (
-        <FormGroup fieldId={name} key={name} label={title} helperText={description}>
+        <FormGroup fieldId={name} key={name} label={title}>
+            <FormHelperText>
+                <HelperText>
+                    <HelperTextItem>{description}</HelperTextItem>
+                </HelperText>
+            </FormHelperText>            
             {component}
         </FormGroup>
     )

diff --git a/horreum-web/src/components/EnumSelect.tsx b/horreum-web/src/components/EnumSelect.tsx
@@ -1,6 +1,9 @@
 import { ReactNode, useState } from "react"
 
-import { Select, SelectOption } from "@patternfly/react-core"
+import {
+	Select,
+	SelectOption
+} from '@patternfly/react-core/deprecated';
 
 type EnumSelectProps = {
     options: Record<string, ReactNode>
@@ -14,7 +17,7 @@ export default function EnumSelect({options, selected, onSelect, isDisabled}: En
     return (
         <Select
             isOpen={isOpen}
-            onToggle={setOpen}
+            onToggle={(_event, val) => setOpen(val)}
             placeholderText="Please select..."
             selections={selected}
             onSelect={(_, value) => {

diff --git a/horreum-web/src/components/ErrorBadge.tsx b/horreum-web/src/components/ErrorBadge.tsx
@@ -10,13 +10,13 @@ export default function ErrorBadge({ children }: ErrorBadgeProps) {
     return (
         <Badge
             style={{
-                background: "var(--pf-global--palette--red-50)",
-                color: "var(--pf-global--Color--200)",
+                background: "var(--pf-v5-global--palette--red-50)",
+                color: "var(--pf-v5-global--Color--200)",
             }}
         >
             <ExclamationCircleIcon
                 style={{
-                    fill: "var(--pf-global--danger-color--100)",
+                    fill: "var(--pf-v5-global--danger-color--100)",
                     marginTop: "4px",
                 }}
             />{" "}

diff --git a/horreum-web/src/components/ExportImport.tsx b/horreum-web/src/components/ExportImport.tsx
@@ -1,6 +1,9 @@
 import {useContext, useState} from "react"
 
-import { Button, FileUpload, Flex, FlexItem, Form, FormGroup, Spinner } from "@patternfly/react-core"
+import { Button, FileUpload, Flex, FlexItem, Form, FormGroup, Spinner,
+    HelperText,
+    HelperTextItem,
+    FormHelperText } from "@patternfly/react-core"
 
 import ExportButton from "./ExportButton"
 import {AppContext} from "../context/appContext";
@@ -29,9 +32,14 @@ export default function ExportImport(props: ExportImportProps) {
             <FormGroup
                 label="Import"
                 fieldId="import"
-                validated={parseError ? "error" : "default"}
-                helperTextInvalid={parseError?.toString()}
             >
+                <FormHelperText>
+                    <HelperText>
+                        <HelperTextItem variant={parseError ? "error" : "default"}>
+                        {parseError ? parseError?.toString() : ""}
+                        </HelperTextItem>
+                    </HelperText>
+                </FormHelperText>
                 <Flex>
                     <FlexItem>
                         <FileUpload

diff --git a/horreum-web/src/components/FolderSelect.tsx b/horreum-web/src/components/FolderSelect.tsx
@@ -1,7 +1,10 @@
 import {useContext, useEffect, useState} from "react"
 import { useSelector } from "react-redux"
 
-import { Select, SelectOption } from "@patternfly/react-core"
+import {
+	Select,
+	SelectOption
+} from '@patternfly/react-core/deprecated';
 
 import { teamsSelector } from "../auth"
 import {AppContext} from "../context/appContext";
@@ -30,7 +33,7 @@ type FolderSelectProps = {
             isOpen={open}
             isCreatable={canCreate}
             variant={canCreate ? "typeahead" : "single"}
-            onToggle={setOpen}
+            onToggle={(_event, val) => setOpen(val)}
             selections={folder}
             menuAppendTo="parent"
             onSelect={(_, item) => {

diff --git a/horreum-web/src/components/HelpButton.tsx b/horreum-web/src/components/HelpButton.tsx
@@ -1,3 +1,4 @@
+import { Icon } from '@patternfly/react-core';
 import { HelpIcon } from "@patternfly/react-icons"
 
 export default function HelpButton() {
@@ -6,9 +7,11 @@ export default function HelpButton() {
             type="button"
             aria-label="More info"
             onClick={e => e.preventDefault()}
-            className="pf-c-form__group-label-help"
+            className="pf-v5-c-form__group-label-help"
         >
-            <HelpIcon noVerticalAlign />
+            <Icon isInline={true}>
+                <HelpIcon/>
+            </Icon>
         </button>
     )
 }
diff --git a/horreum-web/src/components/HttpActionUrlSelector.tsx b/horreum-web/src/components/HttpActionUrlSelector.tsx
@@ -1,9 +1,24 @@
 import {useContext, useEffect, useRef, useState} from "react"
-import { Dropdown, DropdownItem, DropdownToggle, FormGroup, InputGroup, TextInput } from "@patternfly/react-core"
+import {
+	FormGroup,
+	InputGroup,
+	TextInput, InputGroupItem,
+    HelperText,
+    HelperTextItem,
+    FormHelperText,
+
+} from '@patternfly/react-core';
+import {
+	Dropdown,
+	DropdownItem,
+	DropdownToggle
+} from '@patternfly/react-core/deprecated';
+
 import { AllowedSite, getAllowedSites} from "../api"
 import {AppContext} from "../context/appContext";
 import {AppContextType} from "../context/@types/appContextTypes";
 
+
 function isValidUrl(url: string) {
     try {
         new URL(url)
@@ -43,17 +58,8 @@ export default function HttpActionUrlSelector({ active, value, setValue, isDisab
     return (
         <FormGroup
             label="HTTP Action URL"
-            validated={isUrlValid && isUrlAllowed && extraCheckResult === true ? "default" : "error"}
             isRequired={true}
             fieldId="url"
-            helperText="URL (with protocol) for POST callback"
-            helperTextInvalid={
-                !isUrlValid
-                    ? "URL cannot be parsed."
-                    : !isUrlAllowed
-                    ? "URL does not start with any of the allowed prefixes."
-                    : extraCheckResult
-            }
         >
             <InputGroup>
                 {!isReadOnly && (
@@ -71,7 +77,7 @@ export default function HttpActionUrlSelector({ active, value, setValue, isDisab
                             }
                         }}
                         toggle={
-                            <DropdownToggle onToggle={setDropdownOpen} isDisabled={isDisabled}>
+                            <DropdownToggle onToggle={(_event, val) => setDropdownOpen(val)} isDisabled={isDisabled}>
                                 Pick URL prefix
                             </DropdownToggle>
                         }
@@ -83,7 +89,7 @@ export default function HttpActionUrlSelector({ active, value, setValue, isDisab
                         ))}
                     />
                 )}
-                <TextInput
+                <InputGroupItem isFill ><TextInput
                     ref={ref}
                     value={value}
                     isRequired
@@ -93,7 +99,7 @@ export default function HttpActionUrlSelector({ active, value, setValue, isDisab
                     name="url"
                     validated={isUrlValid && isUrlAllowed && extraCheckResult === true ? "default" : "error"}
                     placeholder="e.g. 'http://example.com/api/action'"
-                    onChange={value => {
+                    onChange={(_event, value) => {
                         value = value.trim()
                         if (setValid) {
                             setValid(
@@ -105,9 +111,20 @@ export default function HttpActionUrlSelector({ active, value, setValue, isDisab
                         setValue(value)
                     }}
                     isDisabled={isDisabled}
-                    isReadOnly={isReadOnly}
-                />
+                     readOnlyVariant={isReadOnly ? "default" : undefined}
+                /></InputGroupItem>
             </InputGroup>
+            <FormHelperText>
+                <HelperText>
+                    <HelperTextItem variant={isUrlValid && isUrlAllowed && extraCheckResult === true ? "default" : "error"}>
+                    {isUrlValid && isUrlAllowed && extraCheckResult === true ? "URL (with protocol) for POST callback" : !isUrlValid
+                        ? "URL cannot be parsed."
+                        : !isUrlAllowed
+                        ? "URL does not start with any of the allowed prefixes."
+                        : extraCheckResult ? "URL (with protocol) for POST callback" : ""}
+                    </HelperTextItem>
+                </HelperText>
+            </FormHelperText>
         </FormGroup>
     )
 }
diff --git a/horreum-web/src/components/IndirectLink.tsx b/horreum-web/src/components/IndirectLink.tsx
@@ -2,13 +2,13 @@ import { HTMLProps, ReactNode } from "react"
 import { useNavigate } from "react-router-dom"
 
 import { noop } from "../utils"
-import { Button } from "@patternfly/react-core"
+import { Button, ButtonProps } from "@patternfly/react-core"
 
 type IndirectLinkProps = {
     variant?: "primary" | "secondary" | "tertiary" | "control" | "link" | "plain"
     children: ReactNode | ReactNode[]
     onNavigate(): Promise<string>
-} & Omit<HTMLProps<HTMLButtonElement>, "ref">
+} & ButtonProps //Omit<HTMLProps<HTMLButtonElement>, "ref"|"size">
 
 export default function IndirectLink({ variant = "link", onNavigate, children, ...props }: IndirectLinkProps) {
     const navigate  = useNavigate()