[frontend] Migrate 5 components from deprecations

src/components/AnalyticsConsent/index.tsx

@@ -1,10 +1,8 @@
-import { Button, Grid, Theme, Typography, useMediaQuery } from "@mui/material";
+import { Button, Grid2, Stack, Typography } from "@mui/material";
 import Drawer from "@mui/material/Drawer";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
-import { themeColors } from "types/theme";
-
 interface ConsentProps {
   onChangeConsent: (consentVal?: boolean) => void;
   required: boolean;
@@ -17,16 +15,14 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
   const rejectAnalytics = (): void => props.onChangeConsent(false);
   const clickedAway = (): void => props.onChangeConsent(undefined);
 
-  const isXs = useMediaQuery<Theme>((th) => th.breakpoints.only("xs"));
-
   function ConsentButton(props: {
     onClick: () => void;
     text: string;
   }): ReactElement {
     return (
       <Button
         onClick={props.onClick}
-        style={{ height: 60, width: 155 }}
+        sx={{ height: 60, width: 155 }}
         variant="contained"
       >
         <Typography variant="body2">{props.text}</Typography>
@@ -36,44 +32,42 @@ export default function AnalyticsConsent(props: ConsentProps): ReactElement {
 
   return (
     <Drawer
-      anchor={"bottom"}
+      anchor="bottom"
       open
-      onClose={!props.required ? clickedAway : undefined}
-      PaperProps={{ style: { padding: 20 } }}
+      onClose={props.required ? undefined : clickedAway}
+      slotProps={{ paper: { sx: { p: 2 } } }}
     >
-      <Grid
-        container
-        direction={isXs ? "column" : "row"}
+      <Stack
         alignItems="center"
-        spacing={3}
+        direction={{ sm: "row", xs: "column" }}
+        spacing={2}
       >
-        <Grid item xs>
+        {/* Consent texts */}
+        <div>
           <Typography
             variant="h6"
-            style={{ color: themeColors.primary, fontWeight: 600 }}
+            sx={{ color: "primary.main", fontWeight: "bolder" }}
             gutterBottom
           >
             {t("analyticsConsent.consentModal.title")}
           </Typography>
           <Typography variant="body1">
             {t("analyticsConsent.consentModal.description")}
           </Typography>
-        </Grid>
-        <Grid item container xs="auto" spacing={1}>
-          <Grid item>
-            <ConsentButton
-              onClick={acceptAnalytics}
-              text={t("analyticsConsent.consentModal.acceptAllBtn")}
-            />
-          </Grid>
-          <Grid item>
-            <ConsentButton
-              onClick={rejectAnalytics}
-              text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
-            />
-          </Grid>
-        </Grid>
-      </Grid>
+        </div>
+
+        {/* Consent buttons */}
+        <Grid2 container size="auto" spacing={1}>
+          <ConsentButton
+            onClick={acceptAnalytics}
+            text={t("analyticsConsent.consentModal.acceptAllBtn")}
+          />
+          <ConsentButton
+            onClick={rejectAnalytics}
+            text={t("analyticsConsent.consentModal.acceptNecessaryBtn")}
+          />
+        </Grid2>
+      </Stack>
     </Drawer>
   );
 }

src/components/AppBar/index.tsx

@@ -1,4 +1,4 @@
-import { AppBar, Grid, Toolbar } from "@mui/material";
+import { AppBar, Stack, Toolbar } from "@mui/material";
 import { ReactElement, useEffect, useState } from "react";
 import { useLocation } from "react-router";
 
@@ -26,25 +26,32 @@ export default function AppBarComponent(): ReactElement {
     <div className="NavigationBar" style={{ marginBottom: topBarHeight }}>
       <AppBar
         position="fixed"
-        style={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
+        sx={{ maxHeight: appBarHeight, zIndex: theme.zIndex.drawer + 1 }}
       >
         <Toolbar>
-          <Grid container justifyContent="space-between" alignItems="center">
-            <Grid item>
+          <Stack
+            alignItems="center"
+            direction="row"
+            justifyContent="space-between"
+            sx={{ flexGrow: 1 }}
+          >
+            <div>
               <Logo />
               {!!getProjectId() && (
                 <NavigationButtons currentTab={currentTab} />
               )}
-            </Grid>
-            <Grid item>
+            </div>
+
+            <div>
               {!!getProjectId() && <ProjectButtons currentTab={currentTab} />}
               <DownloadButton colorSecondary />
-            </Grid>
-            <Grid item>
+            </div>
+
+            <div>
               <UserMenu currentTab={currentTab} />
               <UserGuideButton />
-            </Grid>
-          </Grid>
+            </div>
+          </Stack>
         </Toolbar>
       </AppBar>
     </div>

src/components/LandingPage/index.tsx

@@ -1,6 +1,6 @@
 import {
   Box,
-  Grid,
+  Grid2,
   Stack,
   Theme,
   Typography,
@@ -44,16 +44,16 @@ export default function LandingPage(): ReactElement {
   return (
     <>
       <TopBar />
-      <Grid container direction={isXs ? "column" : "row-reverse"}>
-        <Grid item xs="auto">
+      <Grid2 container direction={isXs ? "column" : "row-reverse"}>
+        <Grid2 size="auto">
           <LandingButtons top={isXs} />
-        </Grid>
-        <Grid item xs>
+        </Grid2>
+        <Grid2 size="grow">
           <Box style={{ maxHeight: maxBodyHeight, overflow: "auto" }}>
             <Body />
           </Box>
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
       <BottomBar />
     </>
   );

src/components/ProjectScreen/CreateProject.tsx

@@ -2,7 +2,7 @@ import { Cancel } from "@mui/icons-material";
 import {
   Card,
   CardContent,
-  Grid,
+  Grid2,
   IconButton,
   MenuItem,
   Select,
@@ -32,11 +32,30 @@ import theme from "types/theme";
 import { newWritingSystem } from "types/writingSystem";
 import { NormalizedTextField } from "utilities/fontComponents";
 
-export const buttonIdSelectFile = "create-project-select-file";
-export const buttonIdSubmit = "create-project-submit";
-export const fieldIdName = "create-project-name";
-export const formId = "create-project-form";
-export const selectIdVern = "create-proj-select-vern";
+export enum CreateProjectId {
+  ButtonSelectFile = "create-project-select-file",
+  ButtonSubmit = "create-project-submit",
+  FieldName = "create-project-name",
+  Form = "create-project-form",
+  SelectVern = "create-proj-select-vern",
+}
+
+export enum CreateProjectTextId {
+  Create = "createProject.create",
+  CreateSuccess = "createProject.success",
+  LangAnalysis = "projectSettings.language.analysisLanguage",
+  LangAnalysisInfo = "createProject.language",
+  LangVernacular = "projectSettings.language.vernacularLanguage",
+  Name = "createProject.name",
+  NameTaken = "createProject.nameTaken",
+  Required = "login.required",
+  SelectLanguage = "createProject.languageSelect",
+  SelectOther = "createProject.languageOptionOther",
+  Upload = "createProject.upload?",
+  UploadBrowse = "buttons.browse",
+  UploadInfo = "createProject.uploadFormat",
+  UploadSelected = "createProject.fileSelected",
+}
 
 const vernIdNone = "selectLanguageOptionNone";
 const vernIdOther = "selectLanguageOptionOther";
@@ -133,7 +152,7 @@ export default function CreateProject(): ReactElement {
 
     const menuItems = [
       <MenuItem key={vernIdNone} value={vernIdNone}>
-        {t("createProject.languageSelect")}
+        {t(CreateProjectTextId.SelectLanguage)}
       </MenuItem>,
     ];
     menuItems.push(
@@ -145,7 +164,7 @@ export default function CreateProject(): ReactElement {
     );
     menuItems.push(
       <MenuItem key={vernIdOther} value={vernIdOther}>
-        {t("createProject.languageOptionOther")}
+        {t(CreateProjectTextId.SelectOther)}
       </MenuItem>
     );
 
@@ -161,7 +180,12 @@ export default function CreateProject(): ReactElement {
     };
 
     return (
-      <Select defaultValue={vernIdNone} id={selectIdVern} onChange={onChange}>
+      <Select
+        data-testid={CreateProjectId.SelectVern}
+        defaultValue={vernIdNone}
+        id={CreateProjectId.SelectVern}
+        onChange={onChange}
+      >
         {menuItems}
       </Select>
     );
@@ -199,27 +223,33 @@ export default function CreateProject(): ReactElement {
 
   return (
     <Card style={{ width: "100%", maxWidth: 450 }}>
-      <form id={formId} onSubmit={(e) => createProject(e)}>
+      <form
+        data-testid={CreateProjectId.Form}
+        id={CreateProjectId.Form}
+        onSubmit={(e) => createProject(e)}
+      >
         <CardContent>
           {/* Title */}
           <Typography variant="h5" align="center" gutterBottom>
-            {t("createProject.create")}
+            {t(CreateProjectTextId.Create)}
           </Typography>
+
           {/* Project name */}
           <NormalizedTextField
-            id={fieldIdName}
-            label={t("createProject.name")}
+            id={CreateProjectId.FieldName}
+            label={t(CreateProjectTextId.Name)}
             value={name}
             onChange={updateName}
             variant="outlined"
             style={{ width: "100%", marginBottom: theme.spacing(2) }}
             margin="normal"
             error={error["empty"] || error["nameTaken"]}
             helperText={
-              (error["empty"] && t("login.required")) ||
-              (error["nameTaken"] && t("createProject.nameTaken"))
+              (error["empty"] && t(CreateProjectTextId.Required)) ||
+              (error["nameTaken"] && t(CreateProjectTextId.NameTaken))
             }
           />
+
           {/* File upload */}
           <div
             style={{
@@ -232,20 +262,21 @@ export default function CreateProject(): ReactElement {
               style={{ marginTop: theme.spacing(2) }}
               display="inline"
             >
-              {t("createProject.upload?")}
+              {t(CreateProjectTextId.Upload)}
             </Typography>
             <FileInputButton
               updateFile={(file: File) => updateLanguageData(file)}
               accept=".zip"
               buttonProps={{
-                id: buttonIdSelectFile,
-                style: { margin: theme.spacing(1) },
+                "data-testid": CreateProjectId.ButtonSelectFile,
+                id: CreateProjectId.ButtonSelectFile,
+                sx: { m: 1 },
               }}
             >
-              {t("buttons.browse")}
+              {t(CreateProjectTextId.UploadBrowse)}
             </FileInputButton>
             <Typography variant="caption" display="block">
-              <Trans i18nKey="createProject.uploadFormat">
+              <Trans i18nKey={CreateProjectTextId.UploadInfo}>
                 FillerTextA
                 <a href="https://code.google.com/archive/p/lift-standard/">
                   FillerTextB
@@ -256,16 +287,19 @@ export default function CreateProject(): ReactElement {
             {/* Uploaded file name and remove button */}
             {languageData && (
               <Typography variant="body2" style={{ margin: theme.spacing(1) }}>
-                {t("createProject.fileSelected", { val: languageData.name })}
+                {t(CreateProjectTextId.UploadSelected, {
+                  val: languageData.name,
+                })}
                 <IconButton size="small" onClick={() => updateLanguageData()}>
                   <Cancel />
                 </IconButton>
               </Typography>
             )}
           </div>
+
           {/* Vernacular language picker */}
           <Typography style={{ marginTop: theme.spacing(1) }}>
-            {t("projectSettings.language.vernacularLanguage")}
+            {t(CreateProjectTextId.LangVernacular)}
           </Typography>
           {vernLangSelect()}
           {(vernLangIsOther || !vernLangOptions.length) && (
@@ -280,12 +314,13 @@ export default function CreateProject(): ReactElement {
               t={languagePickerStrings_en}
             />
           )}
+
           {/* Analysis language picker */}
           <Typography style={{ marginTop: theme.spacing(1) }}>
-            {t("projectSettings.language.analysisLanguage")}
+            {t(CreateProjectTextId.LangAnalysis)}
           </Typography>
           {languageData ? (
-            t("createProject.language")
+            t(CreateProjectTextId.LangAnalysisInfo)
           ) : (
             <LanguagePicker
               value={analysisLang.bcp47}
@@ -298,24 +333,29 @@ export default function CreateProject(): ReactElement {
               t={languagePickerStrings_en}
             />
           )}
+
           {/* Form submission button */}
-          <Grid
+          <Grid2
             container
             justifyContent="flex-end"
             style={{ marginTop: theme.spacing(1) }}
           >
             <LoadingDoneButton
-              buttonProps={{ color: "primary", id: buttonIdSubmit }}
+              buttonProps={{
+                "data-testid": CreateProjectId.ButtonSubmit,
+                id: CreateProjectId.ButtonSubmit,
+                type: "submit",
+              }}
               disabled={
                 !name.trim() || !vernLang.bcp47 || vernLang.bcp47 === undBcp47
               }
               done={success}
-              doneText={t("createProject.success")}
+              doneText={t(CreateProjectTextId.CreateSuccess)}
               loading={loading}
             >
-              {t("createProject.create")}
+              {t(CreateProjectTextId.Create)}
             </LoadingDoneButton>
-          </Grid>
+          </Grid2>
         </CardContent>
       </form>
     </Card>