fix: bad tables dom on errors and search results (#556)

Fix a warning in the console because our tables are not well formed on search results page and errors page.
openfoodfacts · Dec 20, 2024 · 31243c7 · 31243c7
1 parent 4036188
commit 31243c7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/taxonomy-editor-frontend/src/components/EntryNodesTableBody.tsx b/taxonomy-editor-frontend/src/components/EntryNodesTableBody.tsx
@@ -8,7 +8,7 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import ISO6391 from "iso-639-1";
 import { useEffect, useState } from "react";
 import { SHOWN_LANGUAGES_KEY } from "@/pages/project/editentry/ListTranslations";
@@ -59,6 +59,8 @@ export const EntryNodesTableBody = ({
 }: Props) => {
   const [shownLanguageCodes, setShownLanguageCodes] = useState<string[]>([]);
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     // get shown languages from local storage if it exists else use main language
     try {
@@ -95,8 +97,9 @@ export const EntryNodesTableBody = ({
           <TableRow
             key={id}
             hover
-            component={Link}
-            to={`/${taxonomyName}/${branchName}/entry/${id}`}
+            onClick={() => {
+              navigate(`/${taxonomyName}/${branchName}/entry/${id}`);
+            }}
             sx={{ textDecoration: "none" }}
           >
             <TableCell align="left" component="td" scope="row">

diff --git a/taxonomy-editor-frontend/src/pages/project/errors/index.tsx b/taxonomy-editor-frontend/src/pages/project/errors/index.tsx
@@ -10,6 +10,7 @@ import {
   TableBody,
   TableHead,
   TableContainer,
+  TableRow,
   Stack,
 } from "@mui/material";
 import MaterialTable from "@material-table/core";
@@ -69,22 +70,26 @@ export const Errors = () => {
       <TableContainer sx={{ mb: 2 }}>
         <Table style={{ border: "solid", borderWidth: 1.5 }}>
           <TableHead>
-            <TableCell align="left">
-              <Typography variant="h6">Taxonomy Name</Typography>
-            </TableCell>
-            <TableCell align="left">
-              <Typography variant="h6">Branch Name</Typography>
-            </TableCell>
+            <TableRow>
+              <TableCell align="left">
+                <Typography variant="h6">Taxonomy Name</Typography>
+              </TableCell>
+              <TableCell align="left">
+                <Typography variant="h6">Branch Name</Typography>
+              </TableCell>
+            </TableRow>
           </TableHead>
           <TableBody>
-            <TableCell align="left" component="td" scope="row">
-              <Typography variant="body1">
-                {toTitleCase(taxonomyName || "")}
-              </Typography>
-            </TableCell>
-            <TableCell align="left" component="td" scope="row">
-              <Typography variant="body1">{branchName}</Typography>
-            </TableCell>
+            <TableRow>
+              <TableCell align="left" component="td" scope="row">
+                <Typography variant="body1">
+                  {toTitleCase(taxonomyName || "")}
+                </Typography>
+              </TableCell>
+              <TableCell align="left" component="td" scope="row">
+                <Typography variant="body1">{branchName}</Typography>
+              </TableCell>
+            </TableRow>
           </TableBody>
         </Table>
       </TableContainer>