Skip to content

Commit 192df9e

Browse files
eric-nguyen-cseric-nguyen-cs
authored
chore: Add info banners on the frontend (#473)
* docs: add info banners * refactor: delete unnecessary components * fix: add line break
1 parent 0b26030 commit 192df9e

File tree

8 files changed

+256
-236
lines changed

8 files changed

+256
-236
lines changed

‎taxonomy-editor-frontend/src/components/CustomAlert.tsx

-23
This file was deleted.

‎taxonomy-editor-frontend/src/components/ResponsiveAppBar.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export const ResponsiveAppBar = () => {
143143
component={Link}
144144
to="/"
145145
target="_blank"
146+
rel="noopener"
146147
>
147148
<img
148149
src={logoUrl}

‎taxonomy-editor-frontend/src/components/WarningParsingErrors.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { DefaultService } from "@/client";
2+
import { Alert, AlertTitle } from "@mui/material";
23
import { useQuery } from "@tanstack/react-query";
3-
import { CustomAlert } from "./CustomAlert";
44

55
interface WarningParsingErrorsProps {
66
taxonomyName: string;
@@ -28,13 +28,12 @@ export const WarningParsingErrors: React.FC<WarningParsingErrorsProps> = ({
2828

2929
if (errorNode && errorNode?.errors.length !== 0) {
3030
return (
31-
<CustomAlert
32-
severity="warning"
33-
title="Parsing errors"
34-
message="This taxonomy has encountered parsing errors.
35-
Please review and fix errors on the 'Errors' page, so that the
36-
taxonomy can then be edited."
37-
/>
31+
<Alert severity="warning">
32+
<AlertTitle>Parsing errors</AlertTitle>
33+
This taxonomy has encountered parsing errors. Please review and fix
34+
errors on the &apos;Errors&apos; page, so that the taxonomy can then be
35+
edited.
36+
</Alert>
3837
);
3938
}
4039

‎taxonomy-editor-frontend/src/pages/go-to-project/index.tsx

+22-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useNavigate } from "react-router-dom";
22

3-
import { Typography, Box, Grid, Link as MuiLink } from "@mui/material";
3+
import { Typography, Box, Grid, Link as MuiLink, Alert } from "@mui/material";
44
import { DataGrid, GridColDef, GridRowParams } from "@mui/x-data-grid";
55
import CircularProgress from "@mui/material/CircularProgress";
66
import { useQuery } from "@tanstack/react-query";
@@ -105,21 +105,26 @@ export const GoToProject = () => {
105105
}
106106

107107
return (
108-
<Box sx={{ overflowY: "scroll" }}>
109-
<Grid
110-
container
111-
direction="column"
112-
alignItems="center"
113-
justifyContent="center"
114-
gap={2}
115-
>
116-
<Typography sx={{ mt: 2 }} variant="h6">
117-
List of current projects
118-
</Typography>
119-
<Box sx={{ width: "90%", mb: 6 }}>
120-
<ProjectsTable projects={data} />
121-
</Box>
122-
</Grid>
123-
</Box>
108+
<>
109+
<Alert severity="warning">
110+
Please be careful when editing projects you do not own.
111+
</Alert>
112+
<Box sx={{ overflowY: "scroll" }}>
113+
<Grid
114+
container
115+
direction="column"
116+
alignItems="center"
117+
justifyContent="center"
118+
gap={2}
119+
>
120+
<Typography sx={{ mt: 2 }} variant="h6">
121+
List of current projects
122+
</Typography>
123+
<Box sx={{ width: "90%", mb: 6 }}>
124+
<ProjectsTable projects={data} />
125+
</Box>
126+
</Grid>
127+
</Box>
128+
</>
124129
);
125130
};

‎taxonomy-editor-frontend/src/pages/home/index.tsx

+80-59
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Link } from "react-router-dom";
22

33
import Button from "@mui/material/Button";
4-
import { Link as MuiLink } from "@mui/material";
4+
import { Alert, Link as MuiLink } from "@mui/material";
55
import Box from "@mui/material/Box";
66
import Typography from "@mui/material/Typography";
77
import Stack from "@mui/material/Stack";
@@ -11,65 +11,86 @@ import classificationImgUrl from "@/assets/classification.png";
1111

1212
export const Home = () => {
1313
return (
14-
<Container component="main" maxWidth="md">
15-
<Box
16-
sx={{
17-
marginTop: 4,
18-
display: "flex",
19-
flexDirection: "column",
20-
alignItems: "center",
21-
}}
22-
>
23-
<Box
24-
component="img"
25-
height={140}
26-
width={700}
27-
src={logoUrl}
28-
alt="Open Food Facts Logo"
29-
/>
30-
<Box sx={{ mt: 1 }} />
14+
<>
15+
<Alert severity="info" sx={{}}>
16+
You may want to learn more about{" "}
17+
<MuiLink
18+
href="https://wiki.openfoodfacts.org/Global_taxonomies"
19+
target="_blank"
20+
rel="noopener"
21+
>
22+
taxonomies
23+
</MuiLink>{" "}
24+
or read this{" "}
25+
<MuiLink
26+
href="https://wiki.openfoodfacts.org/Taxonomy_editor"
27+
target="_blank"
28+
rel="noopener"
29+
>
30+
app&apos;s documentation
31+
</MuiLink>{" "}
32+
before using the Taxonomy Editor.
33+
</Alert>
34+
<Container component="main" maxWidth="md">
3135
<Box
32-
component="img"
33-
width={128}
34-
height={128}
35-
src={classificationImgUrl}
36-
alt="Classification Logo"
37-
/>
38-
<Typography sx={{ mt: 4, mb: 6 }} variant="h2">
39-
Taxonomy Editor
36+
sx={{
37+
marginTop: 4,
38+
display: "flex",
39+
flexDirection: "column",
40+
alignItems: "center",
41+
}}
42+
>
43+
<Box
44+
component="img"
45+
height={140}
46+
width={700}
47+
src={logoUrl}
48+
alt="Open Food Facts Logo"
49+
/>
50+
<Box sx={{ mt: 1 }} />
51+
<Box
52+
component="img"
53+
width={128}
54+
height={128}
55+
src={classificationImgUrl}
56+
alt="Classification Logo"
57+
/>
58+
<Typography sx={{ mt: 4, mb: 6 }} variant="h2">
59+
Taxonomy Editor
60+
</Typography>
61+
<Stack direction="row" alignItems="center">
62+
<Button
63+
variant="contained"
64+
component={Link}
65+
to="startproject"
66+
sx={{ textDecoration: "none", mb: 2, mr: 4 }}
67+
>
68+
Create new project
69+
</Button>
70+
<Button
71+
variant="contained"
72+
component={Link}
73+
to="gotoproject"
74+
sx={{ textDecoration: "none", mb: 2 }}
75+
>
76+
Open existing project
77+
</Button>
78+
</Stack>
79+
</Box>
80+
<Typography
81+
variant="body2"
82+
color="text.secondary"
83+
align="center"
84+
sx={{ mt: 8, mb: 4 }}
85+
>
86+
{"Copyright © "}
87+
<MuiLink color="inherit" href="https://world.openfoodfacts.org/">
88+
Open Food Facts
89+
</MuiLink>{" "}
90+
{new Date().getFullYear()}
91+
{"."}
4092
</Typography>
41-
<Stack direction="row" alignItems="center">
42-
<Button
43-
variant="contained"
44-
component={Link}
45-
to="startproject"
46-
sx={{ textDecoration: "none", mb: 2, mr: 4 }}
47-
>
48-
Create new project
49-
</Button>
50-
<Button
51-
variant="contained"
52-
component={Link}
53-
to="gotoproject"
54-
sx={{ textDecoration: "none", mb: 2 }}
55-
>
56-
Open existing project
57-
</Button>
58-
</Stack>
59-
</Box>
60-
<Typography
61-
variant="body2"
62-
color="text.secondary"
63-
align="center"
64-
sx={{ mt: 8, mb: 4 }}
65-
>
66-
{"Copyright © "}
67-
<MuiLink color="inherit" href="https://world.openfoodfacts.org/">
68-
Open Food Facts
69-
</MuiLink>{" "}
70-
{new Date().getFullYear()}
71-
{"."}
72-
</Typography>
73-
</Container>
93+
</Container>
94+
</>
7495
);
7596
};

‎taxonomy-editor-frontend/src/pages/project/editentry/index.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import { useState } from "react";
22
import { Link, useParams } from "react-router-dom";
33

4-
import { Typography, Stack, IconButton, Button, Box } from "@mui/material";
4+
import {
5+
Typography,
6+
Stack,
7+
IconButton,
8+
Alert,
9+
Button,
10+
Box,
11+
} from "@mui/material";
512
import Dialog from "@mui/material/Dialog";
613
import DialogActions from "@mui/material/DialogActions";
714
import DialogContent from "@mui/material/DialogContent";
@@ -13,7 +20,6 @@ import AccumulateAllComponents from "./AccumulateAllComponents";
1320
import { createBaseURL, removeTxtExtension, toTitleCase } from "@/utils";
1421
import { greyHexCode } from "@/constants";
1522
import { useQuery } from "@tanstack/react-query";
16-
import { CustomAlert } from "@/components/CustomAlert";
1723
import { DefaultService } from "@/client";
1824

1925
type EditEntryProps = {
@@ -76,13 +82,11 @@ const EditEntry = ({ taxonomyName, branchName, id }: EditEntryProps) => {
7682
)}
7783
</Stack>
7884
{isExternalNode && (
79-
<CustomAlert
80-
message={`This node has been imported from another taxonomy (${toTitleCase(
85+
<Alert severity="info" sx={{ ml: 4, mb: 2, width: "fit-content" }}>
86+
{`This node has been imported from another taxonomy (${toTitleCase(
8187
removeTxtExtension(node.original_taxonomy)
8288
)}) to extend the current taxonomy. You can only add children from the current taxonomy to it.`}
83-
severity="info"
84-
sx={{ ml: 4, mb: 2, width: "fit-content" }}
85-
/>
89+
</Alert>
8690
)}
8791
</Box>
8892

‎taxonomy-editor-frontend/src/pages/project/export/index.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ const ExportTaxonomyToGithub = ({
6767
sx={{ mt: 10, flexGrow: 1, textAlign: "center" }}
6868
variant="h5"
6969
>
70-
Click the button below to export to GitHub
70+
Click the button below to export to GitHub. <br />
71+
Your changes will be reviewed by the community before being accepted.
7172
</Typography>
7273
<Button
7374
startIcon={<GitHubIcon />}
@@ -99,7 +100,12 @@ const ExportTaxonomyToGithub = ({
99100
</DialogContent>
100101
<DialogActions>
101102
<Button onClick={handleClosePullRequestDialog}>Close</Button>
102-
<Button component={MuiLink} target="_blank" href={pullRequestURL}>
103+
<Button
104+
component={MuiLink}
105+
target="_blank"
106+
rel="noopener"
107+
href={pullRequestURL}
108+
>
103109
View your pull request
104110
</Button>
105111
</DialogActions>

0 commit comments

Comments
 (0)