feat: improve errors page (#341)

errors page: remove ellipsis, use width and show more records
openfoodfacts · Jan 18, 2024 · 674e3c1 · 674e3c1
1 parent 8409058
commit 674e3c1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/parser/openfoodfacts_taxonomy_parser/parser/logger.py b/parser/openfoodfacts_taxonomy_parser/parser/logger.py
@@ -3,7 +3,7 @@
 
 class ParserConsoleLogger:
     @staticmethod
-    def ellipsis(text, max=20):
+    def ellipsis(text, max=1000):
         """Cut a text adding eventual ellipsis if we do not display it fully"""
         return text[:max] + ("..." if len(text) > max else "")
 

diff --git a/taxonomy-editor-frontend/src/pages/errors/index.jsx b/taxonomy-editor-frontend/src/pages/errors/index.jsx
@@ -12,7 +12,7 @@ import {
   TableContainer,
 } from "@mui/material";
 import MaterialTable from "@material-table/core";
-import CircularProgress from "@mui/material/CircularProgress";
+import { Alert, CircularProgress } from "@mui/material";
 import { useState, useEffect } from "react";
 
 const Errors = ({ addNavLinks }) => {
@@ -66,12 +66,14 @@ const Errors = ({ addNavLinks }) => {
   }
 
   return (
-    <>
-      <TableContainer sx={{ ml: 2, width: 375, mt: 2 }}>
+    <Box
+      sx={{ display: "flex", flexDirection: "column", my: 4, mx: 6, gap: 2 }}
+    >
+      <TableContainer sx={{ width: 375, mb: 2 }}>
         <Table style={{ border: "solid", borderWidth: 1.5 }}>
           <TableHead>
             <TableCell align="left">
-              <Typography variant="h6">Taxonony Name</Typography>
+              <Typography variant="h6">Taxonomy Name</Typography>
             </TableCell>
             <TableCell align="left">
               <Typography variant="h6">Branch Name</Typography>
@@ -89,11 +91,11 @@ const Errors = ({ addNavLinks }) => {
           </TableBody>
         </Table>
       </TableContainer>
+      <Alert severity="warning">
+        These errors must be fixed manually via Github!
+      </Alert>
       <Box
         sx={{
-          width: 500,
-          ml: 2,
-          mt: 2,
           border: "solid",
           borderWidth: 1.5,
         }}
@@ -111,10 +113,12 @@ const Errors = ({ addNavLinks }) => {
           title="Errors"
           options={{
             tableLayout: "fixed",
+            pageSize: 50,
+            pageSizeOptions: ["20", "50", "100", "200"],
           }}
         />
       </Box>
-    </>
+    </Box>
   );
 };