Skip to content

Commit a65801e

Browse files
imnasnainaecimnasnainaec
authored
[frontend] Migrate 5 components from deprecations (#3854)
* Grid -> Grid2: AnalyticsConsent, AppBar, LandingPage, CreateProject, UserSettings * react-test-renderer -> @testing-library: CreateProject
1 parent d7e37be commit a65801e

File tree

6 files changed

+296
-276
lines changed

6 files changed

+296
-276
lines changed

‎src/components/AnalyticsConsent/index.tsx‎

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { Button, Grid, Theme, Typography, useMediaQuery } from "@mui/material";
1+
import { Button, Grid2, Stack, Typography } from "@mui/material";
22
import Drawer from "@mui/material/Drawer";
33
import { ReactElement } from "react";
44
import { useTranslation } from "react-i18next";
55

6-
import { themeColors } from "types/theme";
7-
86
interface ConsentProps {
97
onChangeConsent: (consentVal?: boolean) => void;
108
required: boolean;
@@ -17,16 +15,14 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
1715
const rejectAnalytics = (): void => props.onChangeConsent(false);
1816
const clickedAway = (): void => props.onChangeConsent(undefined);
1917

20-
const isXs = useMediaQuery<Theme>((th) => th.breakpoints.only("xs"));
21-
2218
function ConsentButton(props: {
2319
onClick: () => void;
2420
text: string;
2521
}): ReactElement {
2622
return (
2723
<Button
2824
onClick={props.onClick}
29-
style={{ height: 60, width: 155 }}
25+
sx={{ height: 60, width: 155 }}
3026
variant="contained"
3127
>
3228
<Typography variant="body2">{props.text}</Typography>
@@ -36,44 +32,42 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
3632

3733
return (
3834
<Drawer
39-
anchor={"bottom"}
35+
anchor="bottom"
4036
open
41-
onClose={!props.required ? clickedAway : undefined}
42-
PaperProps={{ style: { padding: 20 } }}
37+
onClose={props.required ? undefined : clickedAway}
38+
slotProps={{ paper: { sx: { p: 2 } } }}
4339
>
44-
<Grid
45-
container
46-
direction={isXs ? "column" : "row"}
40+
<Stack
4741
alignItems="center"
48-
spacing={3}
42+
direction={{ sm: "row", xs: "column" }}
43+
spacing={2}
4944
>
50-
<Grid item xs>
45+
{/* Consent texts */}
46+
<div>
5147
<Typography
5248
variant="h6"
53-
style={{ color: themeColors.primary, fontWeight: 600 }}
49+
sx={{ color: "primary.main", fontWeight: "bolder" }}
5450
gutterBottom
5551
>
5652
{t("analyticsConsent.consentModal.title")}
5753
</Typography>
5854
<Typography variant="body1">
5955
{t("analyticsConsent.consentModal.description")}
6056
</Typography>
61-
</Grid>
62-
<Grid item container xs="auto" spacing={1}>
63-
<Grid item>
64-
<ConsentButton
65-
onClick={acceptAnalytics}
66-
text={t("analyticsConsent.consentModal.acceptAllBtn")}
67-
/>
68-
</Grid>
69-
<Grid item>
70-
<ConsentButton
71-
onClick={rejectAnalytics}
72-
text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
73-
/>
74-
</Grid>
75-
</Grid>
76-
</Grid>
57+
</div>
58+
59+
{/* Consent buttons */}
60+
<Grid2 container size="auto" spacing={1}>
61+
<ConsentButton
62+
onClick={acceptAnalytics}
63+
text={t("analyticsConsent.consentModal.acceptAllBtn")}
64+
/>
65+
<ConsentButton
66+
onClick={rejectAnalytics}
67+
text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
68+
/>
69+
</Grid2>
70+
</Stack>
7771
</Drawer>
7872
);
7973
}

‎src/components/AppBar/index.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AppBar, Grid, Toolbar } from "@mui/material";
1+
import { AppBar, Stack, Toolbar } from "@mui/material";
22
import { ReactElement, useEffect, useState } from "react";
33
import { useLocation } from "react-router";
44

@@ -26,25 +26,32 @@ export default function AppBarComponent(): ReactElement {
2626
<div className="NavigationBar" style={{ marginBottom: topBarHeight }}>
2727
<AppBar
2828
position="fixed"
29-
style={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
29+
sx={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
3030
>
3131
<Toolbar>
32-
<Grid container justifyContent="space-between" alignItems="center">
33-
<Grid item>
32+
<Stack
33+
alignItems="center"
34+
direction="row"
35+
justifyContent="space-between"
36+
sx={{ flexGrow: 1 }}
37+
>
38+
<div>
3439
<Logo />
3540
{!!getProjectId() && (
3641
<NavigationButtons currentTab={currentTab} />
3742
)}
38-
</Grid>
39-
<Grid item>
43+
</div>
44+
45+
<div>
4046
{!!getProjectId() && <ProjectButtons currentTab={currentTab} />}
4147
<DownloadButton colorSecondary />
42-
</Grid>
43-
<Grid item>
48+
</div>
49+
50+
<div>
4451
<UserMenu currentTab={currentTab} />
4552
<UserGuideButton />
46-
</Grid>
47-
</Grid>
53+
</div>
54+
</Stack>
4855
</Toolbar>
4956
</AppBar>
5057
</div>

‎src/components/LandingPage/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
22
Box,
3-
Grid,
3+
Grid2,
44
Stack,
55
Theme,
66
Typography,
@@ -44,16 +44,16 @@ export default function LandingPage(): ReactElement {
4444
return (
4545
<>
4646
<TopBar />
47-
<Grid container direction={isXs ? "column" : "row-reverse"}>
48-
<Grid item xs="auto">
47+
<Grid2 container direction={isXs ? "column" : "row-reverse"}>
48+
<Grid2 size="auto">
4949
<LandingButtons top={isXs} />
50-
</Grid>
51-
<Grid item xs>
50+
</Grid2>
51+
<Grid2 size="grow">
5252
<Box style={{ maxHeight: maxBodyHeight, overflow: "auto" }}>
5353
<Body />
5454
</Box>
55-
</Grid>
56-
</Grid>
55+
</Grid2>
56+
</Grid2>
5757
<BottomBar />
5858
</>
5959
);

‎src/components/ProjectScreen/CreateProject.tsx‎

Lines changed: 69 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Cancel } from "@mui/icons-material";
22
import {
33
Card,
44
CardContent,
5-
Grid,
5+
Grid2,
66
IconButton,
77
MenuItem,
88
Select,
@@ -32,11 +32,30 @@ import theme from "types/theme";
3232
import { newWritingSystem } from "types/writingSystem";
3333
import { NormalizedTextField } from "utilities/fontComponents";
3434

35-
export const buttonIdSelectFile = "create-project-select-file";
36-
export const buttonIdSubmit = "create-project-submit";
37-
export const fieldIdName = "create-project-name";
38-
export const formId = "create-project-form";
39-
export const selectIdVern = "create-proj-select-vern";
35+
export enum CreateProjectId {
36+
ButtonSelectFile = "create-project-select-file",
37+
ButtonSubmit = "create-project-submit",
38+
FieldName = "create-project-name",
39+
Form = "create-project-form",
40+
SelectVern = "create-proj-select-vern",
41+
}
42+
43+
export enum CreateProjectTextId {
44+
Create = "createProject.create",
45+
CreateSuccess = "createProject.success",
46+
LangAnalysis = "projectSettings.language.analysisLanguage",
47+
LangAnalysisInfo = "createProject.language",
48+
LangVernacular = "projectSettings.language.vernacularLanguage",
49+
Name = "createProject.name",
50+
NameTaken = "createProject.nameTaken",
51+
Required = "login.required",
52+
SelectLanguage = "createProject.languageSelect",
53+
SelectOther = "createProject.languageOptionOther",
54+
Upload = "createProject.upload?",
55+
UploadBrowse = "buttons.browse",
56+
UploadInfo = "createProject.uploadFormat",
57+
UploadSelected = "createProject.fileSelected",
58+
}
4059

4160
const vernIdNone = "selectLanguageOptionNone";
4261
const vernIdOther = "selectLanguageOptionOther";
@@ -133,7 +152,7 @@ export default function CreateProject(): ReactElement {
133152

134153
const menuItems = [
135154
<MenuItem key={vernIdNone} value={vernIdNone}>
136-
{t("createProject.languageSelect")}
155+
{t(CreateProjectTextId.SelectLanguage)}
137156
</MenuItem>,
138157
];
139158
menuItems.push(
@@ -145,7 +164,7 @@ export default function CreateProject(): ReactElement {
145164
);
146165
menuItems.push(
147166
<MenuItem key={vernIdOther} value={vernIdOther}>
148-
{t("createProject.languageOptionOther")}
167+
{t(CreateProjectTextId.SelectOther)}
149168
</MenuItem>
150169
);
151170

@@ -161,7 +180,12 @@ export default function CreateProject(): ReactElement {
161180
};
162181

163182
return (
164-
<Select defaultValue={vernIdNone} id={selectIdVern} onChange={onChange}>
183+
<Select
184+
data-testid={CreateProjectId.SelectVern}
185+
defaultValue={vernIdNone}
186+
id={CreateProjectId.SelectVern}
187+
onChange={onChange}
188+
>
165189
{menuItems}
166190
</Select>
167191
);
@@ -199,27 +223,33 @@ export default function CreateProject(): ReactElement {
199223

200224
return (
201225
<Card style={{ width: "100%", maxWidth: 450 }}>
202-
<form id={formId} onSubmit={(e) => createProject(e)}>
226+
<form
227+
data-testid={CreateProjectId.Form}
228+
id={CreateProjectId.Form}
229+
onSubmit={(e) => createProject(e)}
230+
>
203231
<CardContent>
204232
{/* Title */}
205233
<Typography variant="h5" align="center" gutterBottom>
206-
{t("createProject.create")}
234+
{t(CreateProjectTextId.Create)}
207235
</Typography>
236+
208237
{/* Project name */}
209238
<NormalizedTextField
210-
id={fieldIdName}
211-
label={t("createProject.name")}
239+
id={CreateProjectId.FieldName}
240+
label={t(CreateProjectTextId.Name)}
212241
value={name}
213242
onChange={updateName}
214243
variant="outlined"
215244
style={{ width: "100%", marginBottom: theme.spacing(2) }}
216245
margin="normal"
217246
error={error["empty"] || error["nameTaken"]}
218247
helperText={
219-
(error["empty"] && t("login.required")) ||
220-
(error["nameTaken"] && t("createProject.nameTaken"))
248+
(error["empty"] && t(CreateProjectTextId.Required)) ||
249+
(error["nameTaken"] && t(CreateProjectTextId.NameTaken))
221250
}
222251
/>
252+
223253
{/* File upload */}
224254
<div
225255
style={{
@@ -232,20 +262,21 @@ export default function CreateProject(): ReactElement {
232262
style={{ marginTop: theme.spacing(2) }}
233263
display="inline"
234264
>
235-
{t("createProject.upload?")}
265+
{t(CreateProjectTextId.Upload)}
236266
</Typography>
237267
<FileInputButton
238268
updateFile={(file: File) => updateLanguageData(file)}
239269
accept=".zip"
240270
buttonProps={{
241-
id: buttonIdSelectFile,
242-
style: { margin: theme.spacing(1) },
271+
"data-testid": CreateProjectId.ButtonSelectFile,
272+
id: CreateProjectId.ButtonSelectFile,
273+
sx: { m: 1 },
243274
}}
244275
>
245-
{t("buttons.browse")}
276+
{t(CreateProjectTextId.UploadBrowse)}
246277
</FileInputButton>
247278
<Typography variant="caption" display="block">
248-
<Trans i18nKey="createProject.uploadFormat">
279+
<Trans i18nKey={CreateProjectTextId.UploadInfo}>
249280
FillerTextA
250281
<a href="https://code.google.com/archive/p/lift-standard/">
251282
FillerTextB
@@ -256,16 +287,19 @@ export default function CreateProject(): ReactElement {
256287
{/* Uploaded file name and remove button */}
257288
{languageData && (
258289
<Typography variant="body2" style={{ margin: theme.spacing(1) }}>
259-
{t("createProject.fileSelected", { val: languageData.name })}
290+
{t(CreateProjectTextId.UploadSelected, {
291+
val: languageData.name,
292+
})}
260293
<IconButton size="small" onClick={() => updateLanguageData()}>
261294
<Cancel />
262295
</IconButton>
263296
</Typography>
264297
)}
265298
</div>
299+
266300
{/* Vernacular language picker */}
267301
<Typography style={{ marginTop: theme.spacing(1) }}>
268-
{t("projectSettings.language.vernacularLanguage")}
302+
{t(CreateProjectTextId.LangVernacular)}
269303
</Typography>
270304
{vernLangSelect()}
271305
{(vernLangIsOther || !vernLangOptions.length) && (
@@ -280,12 +314,13 @@ export default function CreateProject(): ReactElement {
280314
t={languagePickerStrings_en}
281315
/>
282316
)}
317+
283318
{/* Analysis language picker */}
284319
<Typography style={{ marginTop: theme.spacing(1) }}>
285-
{t("projectSettings.language.analysisLanguage")}
320+
{t(CreateProjectTextId.LangAnalysis)}
286321
</Typography>
287322
{languageData ? (
288-
t("createProject.language")
323+
t(CreateProjectTextId.LangAnalysisInfo)
289324
) : (
290325
<LanguagePicker
291326
value={analysisLang.bcp47}
@@ -298,24 +333,29 @@ export default function CreateProject(): ReactElement {
298333
t={languagePickerStrings_en}
299334
/>
300335
)}
336+
301337
{/* Form submission button */}
302-
<Grid
338+
<Grid2
303339
container
304340
justifyContent="flex-end"
305341
style={{ marginTop: theme.spacing(1) }}
306342
>
307343
<LoadingDoneButton
308-
buttonProps={{ color: "primary", id: buttonIdSubmit }}
344+
buttonProps={{
345+
"data-testid": CreateProjectId.ButtonSubmit,
346+
id: CreateProjectId.ButtonSubmit,
347+
type: "submit",
348+
}}
309349
disabled={
310350
!name.trim() || !vernLang.bcp47 || vernLang.bcp47 === undBcp47
311351
}
312352
done={success}
313-
doneText={t("createProject.success")}
353+
doneText={t(CreateProjectTextId.CreateSuccess)}
314354
loading={loading}
315355
>
316-
{t("createProject.create")}
356+
{t(CreateProjectTextId.Create)}
317357
</LoadingDoneButton>
318-
</Grid>
358+
</Grid2>
319359
</CardContent>
320360
</form>
321361
</Card>

0 commit comments

Comments
 (0)