[Statistics] Migrate from deprecated Grid and use a Table

src/components/Statistics/DomainStatistics.tsx

@@ -1,10 +1,17 @@
-import { Card, Grid, ListItem, List } from "@mui/material";
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
 import { ReactElement, useState, useEffect } from "react";
 
-import { SemanticDomainCount, SemanticDomainTreeNode } from "api/models";
+import { SemanticDomainCount } from "api/models";
 import { getSemanticDomainCounts } from "backend";
 import * as LocalStorage from "backend/localStorage";
-import { ColumnHead, TableCell } from "components/Statistics/TableCells";
+import { Cell, HeadCell } from "components/Statistics/TableCells";
 
 interface DomainStatisticsProps {
   lang: string;
@@ -38,40 +45,25 @@ export default function DomainStatistics(
   }
 
   return (
-    <Grid container justifyContent="center">
-      <Card style={{ width: 600 }}>
-        <List>
-          <Grid container wrap="nowrap" justifyContent="space-around">
-            <ColumnHead titleId={"statistics.column.domainNumber"} />
-            <ColumnHead titleId={"statistics.column.domainName"} />
-            <ColumnHead titleId={"statistics.column.senseCount"} />
-          </Grid>
-        </List>
-        <List>
+    <TableContainer component={Paper} sx={{ maxWidth: 700 }}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <HeadCell titleId={"statistics.column.domainNumber"} />
+            <HeadCell titleId={"statistics.column.domainName"} />
+            <HeadCell titleId={"statistics.column.senseCount"} />
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {statisticsList.map((t) => (
-            <TableRow
-              key={t.semanticDomainTreeNode.id}
-              dom={t.semanticDomainTreeNode}
-              count={t.count}
-            />
+            <TableRow key={t.semanticDomainTreeNode.id}>
+              <Cell text={t.semanticDomainTreeNode.id} />
+              <Cell text={t.semanticDomainTreeNode.name} />
+              <Cell text={t.count} />
+            </TableRow>
           ))}
-        </List>
-      </Card>
-    </Grid>
-  );
-}
-
-function TableRow(props: {
-  dom: SemanticDomainTreeNode;
-  count: number;
-}): ReactElement {
-  return (
-    <ListItem style={{ minWidth: "600px" }}>
-      <Grid container wrap="nowrap" justifyContent="space-around">
-        <TableCell text={props.dom.id} />
-        <TableCell text={props.dom.name} />
-        <TableCell text={props.count} />
-      </Grid>
-    </ListItem>
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }

src/components/Statistics/Statistics.tsx

@@ -1,6 +1,6 @@
 import {
   Divider,
-  Grid,
+  Grid2,
   ListItemButton,
   ListItemText,
   Typography,
@@ -65,24 +65,6 @@ export default function Statistics(): ReactElement {
     }
   }
 
-  function handleDisplay(): ReactElement[] {
-    return [
-      <Grid item key={"statistics-title"}>
-        <Typography variant="h4" align="center">
-          {t("statistics.title", { val: currentProject?.name })}
-        </Typography>
-      </Grid>,
-      <Grid item key={"statistics-subtitle"}>
-        <Typography variant="h5" align="center">
-          {t(`statistics.view.${viewName}`)}
-        </Typography>
-      </Grid>,
-      <Grid item key={"statistics-view"}>
-        {componentToDisplay(viewName as viewEnum)}
-      </Grid>,
-    ];
-  }
-
   function handleButton(): ReactElement {
     return (
       <StyledList>
@@ -118,23 +100,28 @@ export default function Statistics(): ReactElement {
   }
 
   return (
-    <Grid container direction="row" spacing={1}>
-      <Grid item xs={2}>
-        {handleButton()}
-      </Grid>
-      <Grid
-        item
-        xs={8}
+    <Grid2 container direction="row" spacing={1}>
+      <Grid2 size={2}>{handleButton()}</Grid2>
+
+      <Grid2
+        alignContent="space-around"
         container
         direction="column"
-        justifyContent="center"
+        size={8}
         spacing={2}
       >
-        {handleDisplay()}
-      </Grid>
-      <Grid item xs={2}>
+        <Typography align="center" variant="h4">
+          {t("statistics.title", { val: currentProject?.name })}
+        </Typography>
+        <Typography align="center" variant="h5">
+          {t(`statistics.view.${viewName}`)}
+        </Typography>
+        {componentToDisplay(viewName as viewEnum)}
+      </Grid2>
+
+      <Grid2 size={2}>
         <ProgressBarComponent />
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

src/components/Statistics/TableCells.tsx

@@ -1,38 +1,21 @@
-import { Grid, Typography } from "@mui/material";
+import { TableCell, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
-export function ColumnHead(props: { titleId: string }): ReactElement {
+export function HeadCell(props: { titleId: string }): ReactElement {
   const { t } = useTranslation();
+
   return (
-    <Grid
-      item
-      xs={5}
-      style={{
-        borderBottomStyle: "dotted",
-        borderBottomWidth: 1,
-        position: "relative",
-      }}
-    >
+    <TableCell sx={{ borderBottomWidth: 1 }}>
       <Typography variant="subtitle1">{t(props.titleId)}</Typography>
-    </Grid>
+    </TableCell>
   );
 }
 
-export function TableCell(props: {
-  text?: string | number | null;
-}): ReactElement {
+export function Cell(props: { text?: string | number | null }): ReactElement {
   return (
-    <Grid
-      item
-      xs={5}
-      style={{
-        borderBottomStyle: "dotted",
-        borderBottomWidth: 1,
-        position: "relative",
-      }}
-    >
+    <TableCell sx={{ borderBottomStyle: "dotted", borderBottomWidth: 1 }}>
       <Typography variant="body1">{props.text}</Typography>
-    </Grid>
+    </TableCell>
   );
 }

src/components/Statistics/UserStatistics.tsx

@@ -1,10 +1,17 @@
-import { Card, Grid, ListItem, List } from "@mui/material";
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
 import { ReactElement, useState, useEffect } from "react";
 
 import { SemanticDomainUserCount } from "api/models";
 import { getSemanticDomainUserCount } from "backend";
 import * as LocalStorage from "backend/localStorage";
-import { ColumnHead, TableCell } from "components/Statistics/TableCells";
+import { Cell, HeadCell } from "components/Statistics/TableCells";
 
 export default function UserStatistics(): ReactElement {
   const [domainUserCountList, setDomainUserCountList] = useState<
@@ -28,33 +35,25 @@ export default function UserStatistics(): ReactElement {
   }
 
   return (
-    <Grid container justifyContent="center">
-      <Card style={{ width: 600 }}>
-        <List>
-          <Grid container wrap="nowrap" justifyContent="space-around">
-            <ColumnHead titleId={"statistics.column.username"} />
-            <ColumnHead titleId={"statistics.column.domainCount"} />
-            <ColumnHead titleId={"statistics.column.senseCount"} />
-          </Grid>
-        </List>
-        <List>
+    <TableContainer component={Paper} sx={{ maxWidth: 700 }}>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <HeadCell titleId={"statistics.column.username"} />
+            <HeadCell titleId={"statistics.column.domainCount"} />
+            <HeadCell titleId={"statistics.column.senseCount"} />
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {domainUserCountList.map((t) => (
-            <TableRow key={t.id} counts={t} />
+            <TableRow key={t.id}>
+              <Cell text={t.username} />
+              <Cell text={t.domainCount} />
+              <Cell text={t.wordCount} />
+            </TableRow>
           ))}
-        </List>
-      </Card>
-    </Grid>
-  );
-}
-
-function TableRow(props: { counts: SemanticDomainUserCount }): ReactElement {
-  return (
-    <ListItem style={{ minWidth: "600px" }}>
-      <Grid container wrap="nowrap" justifyContent="space-around">
-        <TableCell text={props.counts.username} />
-        <TableCell text={props.counts.domainCount} />
-        <TableCell text={props.counts.wordCount} />
-      </Grid>
-    </ListItem>
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }

src/components/Statistics/tests/DomainStatistics.test.tsx

@@ -43,8 +43,8 @@ describe("DomainStatistics", () => {
     expect(mockGetProjectId).toHaveBeenCalled();
   });
 
-  test("all list items are present", async () => {
-    const listItems = screen.queryAllByRole("listitem");
-    expect(listItems.length).toEqual(mockSemanticDomainCountArray.length);
+  test("all rows are present", async () => {
+    const expectedRowCount = mockSemanticDomainCountArray.length + 1; // +1 for the header row
+    expect(screen.queryAllByRole("row")).toHaveLength(expectedRowCount);
   });
 });

src/components/Statistics/tests/Statistics.test.tsx

@@ -35,7 +35,7 @@ beforeEach(async () => {
     render(
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <Statistics />{" "}
+          <Statistics />
         </ThemeProvider>
       </StyledEngineProvider>
     );

src/components/Statistics/tests/UserStatistics.test.tsx

@@ -42,8 +42,8 @@ describe("UserStatistics", () => {
     expect(mockGetProjectId).toHaveBeenCalled();
   });
 
-  test("all list items are present", async () => {
-    const listItems = screen.queryAllByRole("listitem");
-    expect(listItems.length).toEqual(mockSemanticDomainUserCountArray.length);
+  test("all rows are present", async () => {
+    const expectedRowCount = mockSemanticDomainUserCountArray.length + 1; // +1 for the header row
+    expect(screen.queryAllByRole("row")).toHaveLength(expectedRowCount);
   });
 });