chore: Add info banners on the frontend (#473)

* docs: add info banners * refactor: delete unnecessary components * fix: add line break
openfoodfacts · Mar 28, 2024 · 192df9e · 192df9e
1 parent 0b26030
commit 192df9e
Show file tree

Hide file tree

Showing 8 changed files with 256 additions and 236 deletions.
diff --git a/taxonomy-editor-frontend/src/components/CustomAlert.tsx b/taxonomy-editor-frontend/src/components/CustomAlert.tsx
diff --git a/taxonomy-editor-frontend/src/components/ResponsiveAppBar.tsx b/taxonomy-editor-frontend/src/components/ResponsiveAppBar.tsx
@@ -143,6 +143,7 @@ export const ResponsiveAppBar = () => {
                 component={Link}
                 to="/"
                 target="_blank"
+                rel="noopener"
               >
                 <img
                   src={logoUrl}

diff --git a/taxonomy-editor-frontend/src/components/WarningParsingErrors.tsx b/taxonomy-editor-frontend/src/components/WarningParsingErrors.tsx
@@ -1,6 +1,6 @@
 import { DefaultService } from "@/client";
+import { Alert, AlertTitle } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
-import { CustomAlert } from "./CustomAlert";
 
 interface WarningParsingErrorsProps {
   taxonomyName: string;
@@ -28,13 +28,12 @@ export const WarningParsingErrors: React.FC<WarningParsingErrorsProps> = ({
 
   if (errorNode && errorNode?.errors.length !== 0) {
     return (
-      <CustomAlert
-        severity="warning"
-        title="Parsing errors"
-        message="This taxonomy has encountered parsing errors. 
-        Please review and fix errors on the 'Errors' page, so that the 
-        taxonomy can then be edited."
-      />
+      <Alert severity="warning">
+        <AlertTitle>Parsing errors</AlertTitle>
+        This taxonomy has encountered parsing errors. Please review and fix
+        errors on the &apos;Errors&apos; page, so that the taxonomy can then be
+        edited.
+      </Alert>
     );
   }
 

diff --git a/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx b/taxonomy-editor-frontend/src/pages/go-to-project/index.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 
-import { Typography, Box, Grid, Link as MuiLink } from "@mui/material";
+import { Typography, Box, Grid, Link as MuiLink, Alert } from "@mui/material";
 import { DataGrid, GridColDef, GridRowParams } from "@mui/x-data-grid";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useQuery } from "@tanstack/react-query";
@@ -105,21 +105,26 @@ export const GoToProject = () => {
   }
 
   return (
-    <Box sx={{ overflowY: "scroll" }}>
-      <Grid
-        container
-        direction="column"
-        alignItems="center"
-        justifyContent="center"
-        gap={2}
-      >
-        <Typography sx={{ mt: 2 }} variant="h6">
-          List of current projects
-        </Typography>
-        <Box sx={{ width: "90%", mb: 6 }}>
-          <ProjectsTable projects={data} />
-        </Box>
-      </Grid>
-    </Box>
+    <>
+      <Alert severity="warning">
+        Please be careful when editing projects you do not own.
+      </Alert>
+      <Box sx={{ overflowY: "scroll" }}>
+        <Grid
+          container
+          direction="column"
+          alignItems="center"
+          justifyContent="center"
+          gap={2}
+        >
+          <Typography sx={{ mt: 2 }} variant="h6">
+            List of current projects
+          </Typography>
+          <Box sx={{ width: "90%", mb: 6 }}>
+            <ProjectsTable projects={data} />
+          </Box>
+        </Grid>
+      </Box>
+    </>
   );
 };
diff --git a/taxonomy-editor-frontend/src/pages/home/index.tsx b/taxonomy-editor-frontend/src/pages/home/index.tsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 
 import Button from "@mui/material/Button";
-import { Link as MuiLink } from "@mui/material";
+import { Alert, Link as MuiLink } from "@mui/material";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
@@ -11,65 +11,86 @@ import classificationImgUrl from "@/assets/classification.png";
 
 export const Home = () => {
   return (
-    <Container component="main" maxWidth="md">
-      <Box
-        sx={{
-          marginTop: 4,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-        }}
-      >
-        <Box
-          component="img"
-          height={140}
-          width={700}
-          src={logoUrl}
-          alt="Open Food Facts Logo"
-        />
-        <Box sx={{ mt: 1 }} />
+    <>
+      <Alert severity="info" sx={{}}>
+        You may want to learn more about{" "}
+        <MuiLink
+          href="https://wiki.openfoodfacts.org/Global_taxonomies"
+          target="_blank"
+          rel="noopener"
+        >
+          taxonomies
+        </MuiLink>{" "}
+        or read this{" "}
+        <MuiLink
+          href="https://wiki.openfoodfacts.org/Taxonomy_editor"
+          target="_blank"
+          rel="noopener"
+        >
+          app&apos;s documentation
+        </MuiLink>{" "}
+        before using the Taxonomy Editor.
+      </Alert>
+      <Container component="main" maxWidth="md">
         <Box
-          component="img"
-          width={128}
-          height={128}
-          src={classificationImgUrl}
-          alt="Classification Logo"
-        />
-        <Typography sx={{ mt: 4, mb: 6 }} variant="h2">
-          Taxonomy Editor
+          sx={{
+            marginTop: 4,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Box
+            component="img"
+            height={140}
+            width={700}
+            src={logoUrl}
+            alt="Open Food Facts Logo"
+          />
+          <Box sx={{ mt: 1 }} />
+          <Box
+            component="img"
+            width={128}
+            height={128}
+            src={classificationImgUrl}
+            alt="Classification Logo"
+          />
+          <Typography sx={{ mt: 4, mb: 6 }} variant="h2">
+            Taxonomy Editor
+          </Typography>
+          <Stack direction="row" alignItems="center">
+            <Button
+              variant="contained"
+              component={Link}
+              to="startproject"
+              sx={{ textDecoration: "none", mb: 2, mr: 4 }}
+            >
+              Create new project
+            </Button>
+            <Button
+              variant="contained"
+              component={Link}
+              to="gotoproject"
+              sx={{ textDecoration: "none", mb: 2 }}
+            >
+              Open existing project
+            </Button>
+          </Stack>
+        </Box>
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          align="center"
+          sx={{ mt: 8, mb: 4 }}
+        >
+          {"Copyright © "}
+          <MuiLink color="inherit" href="https://world.openfoodfacts.org/">
+            Open Food Facts
+          </MuiLink>{" "}
+          {new Date().getFullYear()}
+          {"."}
         </Typography>
-        <Stack direction="row" alignItems="center">
-          <Button
-            variant="contained"
-            component={Link}
-            to="startproject"
-            sx={{ textDecoration: "none", mb: 2, mr: 4 }}
-          >
-            Create new project
-          </Button>
-          <Button
-            variant="contained"
-            component={Link}
-            to="gotoproject"
-            sx={{ textDecoration: "none", mb: 2 }}
-          >
-            Open existing project
-          </Button>
-        </Stack>
-      </Box>
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        align="center"
-        sx={{ mt: 8, mb: 4 }}
-      >
-        {"Copyright © "}
-        <MuiLink color="inherit" href="https://world.openfoodfacts.org/">
-          Open Food Facts
-        </MuiLink>{" "}
-        {new Date().getFullYear()}
-        {"."}
-      </Typography>
-    </Container>
+      </Container>
+    </>
   );
 };
diff --git a/taxonomy-editor-frontend/src/pages/project/editentry/index.tsx b/taxonomy-editor-frontend/src/pages/project/editentry/index.tsx
@@ -1,7 +1,14 @@
 import { useState } from "react";
 import { Link, useParams } from "react-router-dom";
 
-import { Typography, Stack, IconButton, Button, Box } from "@mui/material";
+import {
+  Typography,
+  Stack,
+  IconButton,
+  Alert,
+  Button,
+  Box,
+} from "@mui/material";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -13,7 +20,6 @@ import AccumulateAllComponents from "./AccumulateAllComponents";
 import { createBaseURL, removeTxtExtension, toTitleCase } from "@/utils";
 import { greyHexCode } from "@/constants";
 import { useQuery } from "@tanstack/react-query";
-import { CustomAlert } from "@/components/CustomAlert";
 import { DefaultService } from "@/client";
 
 type EditEntryProps = {
@@ -76,13 +82,11 @@ const EditEntry = ({ taxonomyName, branchName, id }: EditEntryProps) => {
           )}
         </Stack>
         {isExternalNode && (
-          <CustomAlert
-            message={`This node has been imported from another taxonomy (${toTitleCase(
+          <Alert severity="info" sx={{ ml: 4, mb: 2, width: "fit-content" }}>
+            {`This node has been imported from another taxonomy (${toTitleCase(
               removeTxtExtension(node.original_taxonomy)
             )}) to extend the current taxonomy. You can only add children from the current taxonomy to it.`}
-            severity="info"
-            sx={{ ml: 4, mb: 2, width: "fit-content" }}
-          />
+          </Alert>
         )}
       </Box>
 

diff --git a/taxonomy-editor-frontend/src/pages/project/export/index.tsx b/taxonomy-editor-frontend/src/pages/project/export/index.tsx
@@ -67,7 +67,8 @@ const ExportTaxonomyToGithub = ({
         sx={{ mt: 10, flexGrow: 1, textAlign: "center" }}
         variant="h5"
       >
-        Click the button below to export to GitHub
+        Click the button below to export to GitHub. <br />
+        Your changes will be reviewed by the community before being accepted.
       </Typography>
       <Button
         startIcon={<GitHubIcon />}
@@ -99,7 +100,12 @@ const ExportTaxonomyToGithub = ({
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClosePullRequestDialog}>Close</Button>
-          <Button component={MuiLink} target="_blank" href={pullRequestURL}>
+          <Button
+            component={MuiLink}
+            target="_blank"
+            rel="noopener"
+            href={pullRequestURL}
+          >
             View your pull request
           </Button>
         </DialogActions>