Remove use of deprecated table in ValidationError.tsx

horreum-web/src/domain/runs/ValidationErrorTable.tsx

@@ -1,49 +1,41 @@
-import { useMemo } from "react"
 import { NavLink } from "react-router-dom"
 
 import { SchemaDescriptor, ValidationError } from "../../api"
-import {
-	Table,
-	TableBody,
-	TableHeader
-} from '@patternfly/react-table/deprecated';
+import {Table, Tbody, Td, Th, Thead, Tr} from "@patternfly/react-table";
 
 type ValidationErrorTableProps = {
     errors: ValidationError[]
     schemas: SchemaDescriptor[]
 }
 
 export default function ValidationErrorTable(props: ValidationErrorTableProps) {
-    const rows = useMemo(
-        () =>
-            props.errors &&
-            props.errors.map(e => ({
-                cells: [
-                    e.schemaId ? (
-                        <NavLink key="schema" to={`/schema/${e.schemaId}`}>
-                            {props.schemas.find(s => s.id === e.schemaId)?.name || "unknown schema " + e.schemaId}
-                        </NavLink>
-                    ) : (
-                        "(none)"
-                    ),
-                    e.error.type,
-                    <code>{e.error.path}</code>,
-                    <code>{e.error.schemaLocation ?? e.error.schemaPath }</code>,
-                    <code>{e.error.arguments}</code>,
-                    e.error.message,
-                ],
-            })),
-        [props.errors, props.schemas]
-    )
     return (
-        <Table
-            aria-label="validation-errors"
-            variant="compact"
-            cells={["Schema", "Type", "Path", "Schema Location", "Arguments", "Message"]}
-            rows={rows}
-        >
-            <TableHeader />
-            <TableBody />
+        props.errors &&
+        <Table aria-label="validation-errors" variant="compact" isStickyHeader>
+            <Thead>
+                <Tr>
+                    {["Schema", "Type", "Path", "Schema Location", "Arguments", "Message"].map((col, index) =>
+                        <Th key={index} aria-label={"header-" + index}>{col}</Th>
+                    )}
+                </Tr>
+            </Thead>
+            <Tbody>
+                {props.errors.map((error, index) =>
+                    <Tr key={index}>
+                        <Td key="Schema">{error.schemaId ?
+                            <NavLink key="schema" to={`/schema/${error.schemaId}`}>
+                                {props.schemas.find(s => s.id === error.schemaId)?.name || "unknown schema " + error.schemaId}
+                            </NavLink>
+                            : "None"}
+                        </Td>
+                        <Td key="Type">{error.error.type}</Td>
+                        <Td key="Path"><code>{error.error.path}</code></Td>
+                        <Td key="Schema Location"><code>{error.error.schemaLocation ?? error.error.schemaPath }</code></Td>
+                        <Td key="Arguments"><code>{error.error.arguments}</code></Td>
+                        <Td key="Message">{error.error.message}</Td>
+                    </Tr>
+                )}
+            </Tbody>
         </Table>
     )
 }