Merge pull request #1370 from syucream/fix/mui-v6

Upgrade to MUI v6
dmm-com · Feb 17, 2025 · 9c3fdce · 9c3fdce
2 parents df9a192 + 79a99ce
commit 9c3fdce
Show file tree

Hide file tree

Showing 39 changed files with 4,143 additions and 4,091 deletions.
diff --git a/frontend/src/components/common/AironeLink.tsx b/frontend/src/components/common/AironeLink.tsx
@@ -1,7 +1,9 @@
 import { styled } from "@mui/material/styles";
-import { Link } from "react-router";
+import { Link, LinkProps } from "react-router";
 
-export const AironeLink = styled(Link)(({ theme }) => ({
+export const AironeLink: React.ComponentType<LinkProps> = styled(
+  Link
+)<LinkProps>(({ theme }) => ({
   color: theme.palette.primary.main,
   textDecoration: "none",
   "&:hover": {

diff --git a/frontend/src/components/common/AironeTableHeadCell.tsx b/frontend/src/components/common/AironeTableHeadCell.tsx
@@ -1,6 +1,13 @@
-import { TableCell } from "@mui/material";
+import { TableCell, TableCellProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { SxProps, Theme } from "@mui/system";
+import React from "react";
 
-export const AironeTableHeadCell = styled(TableCell)(({}) => ({
-  color: "#FFFFFF",
-}));
+type StyledTableCellProps = TableCellProps & {
+  sx?: SxProps<Theme>;
+};
+
+export const AironeTableHeadCell: React.ComponentType<StyledTableCellProps> =
+  styled(TableCell)<StyledTableCellProps>({
+    color: "#FFFFFF",
+  }) as React.ComponentType<StyledTableCellProps>;
diff --git a/frontend/src/components/common/AironeTableHeadRow.tsx b/frontend/src/components/common/AironeTableHeadRow.tsx
@@ -1,6 +1,13 @@
-import { TableRow } from "@mui/material";
+import { TableRow, TableRowProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { SxProps, Theme } from "@mui/system";
+import React from "react";
 
-export const AironeTableHeadRow = styled(TableRow)(({}) => ({
-  backgroundColor: "#455A64",
-}));
+type StyledTableRowProps = TableRowProps & {
+  sx?: SxProps<Theme>;
+};
+
+export const AironeTableHeadRow: React.ComponentType<StyledTableRowProps> =
+  styled(TableRow)<StyledTableRowProps>({
+    backgroundColor: "#455A64",
+  }) as React.ComponentType<StyledTableRowProps>;
diff --git a/frontend/src/components/common/FlexBox.tsx b/frontend/src/components/common/FlexBox.tsx
@@ -1,18 +1,32 @@
-import { Box } from "@mui/material";
+import { Box, BoxProps } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { SxProps, Theme } from "@mui/system";
+import React from "react";
 
-export const FlexBox = styled(Box)(({}) => ({
+type StyledBoxProps = BoxProps & {
+  sx?: SxProps<Theme>;
+};
+
+export const FlexBox: React.ComponentType<StyledBoxProps> = styled(
+  Box
+)<StyledBoxProps>({
   display: "flex",
-}));
+}) as React.ComponentType<StyledBoxProps>;
 
-export const BetweenAlignedBox = styled(FlexBox)(({}) => ({
+export const BetweenAlignedBox: React.ComponentType<StyledBoxProps> = styled(
+  FlexBox
+)<StyledBoxProps>({
   justifyContent: "space-between",
-}));
+}) as React.ComponentType<StyledBoxProps>;
 
-export const RightAlignedBox = styled(FlexBox)(({}) => ({
+export const RightAlignedBox: React.ComponentType<StyledBoxProps> = styled(
+  FlexBox
+)<StyledBoxProps>({
   justifyContent: "end",
-}));
+}) as React.ComponentType<StyledBoxProps>;
 
-export const CenterAlignedBox = styled(FlexBox)(({}) => ({
+export const CenterAlignedBox: React.ComponentType<StyledBoxProps> = styled(
+  FlexBox
+)<StyledBoxProps>({
   justifyContent: "center",
-}));
+}) as React.ComponentType<StyledBoxProps>;
diff --git a/frontend/src/components/common/Table.tsx b/frontend/src/components/common/Table.tsx
@@ -1,17 +1,37 @@
-import { TableCell, TableRow } from "@mui/material";
+import {
+  TableCell,
+  TableRow,
+  TableCellProps,
+  TableRowProps,
+} from "@mui/material";
 import { styled } from "@mui/material/styles";
+import { SxProps, Theme } from "@mui/system";
+import React from "react";
 
-export const HeaderTableRow = styled(TableRow)(({}) => ({
+type StyledTableRowProps = TableRowProps & {
+  sx?: SxProps<Theme>;
+};
+
+type StyledTableCellProps = TableCellProps & {
+  sx?: SxProps<Theme>;
+};
+
+export const HeaderTableRow: React.ComponentType<StyledTableRowProps> = styled(
+  TableRow
+)<StyledTableRowProps>({
   backgroundColor: "#455A64",
-}));
+}) as React.ComponentType<StyledTableRowProps>;
 
-export const HeaderTableCell = styled(TableCell)(({}) => ({
-  color: "#FFFFFF",
-  boxSizing: "border-box",
-}));
+export const HeaderTableCell: React.ComponentType<StyledTableCellProps> =
+  styled(TableCell)<StyledTableCellProps>({
+    color: "#FFFFFF",
+    boxSizing: "border-box",
+  }) as React.ComponentType<StyledTableCellProps>;
 
-export const StyledTableRow = styled(TableRow)(({}) => ({
+export const StyledTableRow: React.ComponentType<StyledTableRowProps> = styled(
+  TableRow
+)<StyledTableRowProps>({
   "& td": {
     padding: "8px",
   },
-}));
+}) as React.ComponentType<StyledTableRowProps>;
diff --git a/frontend/src/components/entity/entityForm/AttributesFields.test.tsx b/frontend/src/components/entity/entityForm/AttributesFields.test.tsx
@@ -72,18 +72,18 @@ describe("AttributesFields", () => {
 
     // add second attribute
     await act(async () => {
-      // now there is 1 attribute, and each webhook has 6 buttons (note, type, up, down, delete, add)
+      // now there is 1 attribute, and each webhook has 5 buttons (note, up, down, delete, add)
       // click the add button of the first webhook
-      screen.getAllByRole("button")[5].click();
+      screen.getAllByRole("button")[4].click();
     });
 
     expect(screen.queryAllByPlaceholderText("属性名")).toHaveLength(2);
 
     // delete first attribute
     await act(async () => {
-      // now there is 1 attribute, and each webhook has 6 buttons (note, type, up, down, delete, add)
-      // click the add button of the first webhook
-      screen.getAllByRole("button")[4].click();
+      // now there is 1 attribute, and each webhook has 5 buttons (note, up, down, delete, add)
+      // click the delete button of the first webhook
+      screen.getAllByRole("button")[3].click();
     });
 
     expect(screen.queryAllByPlaceholderText("属性名")).toHaveLength(1);

diff --git a/frontend/src/components/entry/SearchResultControlMenu.tsx b/frontend/src/components/entry/SearchResultControlMenu.tsx
@@ -175,11 +175,13 @@ export const SearchResultControlMenu: FC<Props> = ({
             <StyledTypography variant="caption">次を含む日付</StyledTypography>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <DesktopDatePicker
-                inputFormat="yyyy/MM/dd"
+                format="yyyy/MM/dd"
                 value={
                   filterKey ===
                   AdvancedSearchResultAttrInfoFilterKeyEnum.TEXT_CONTAINED
                     ? keyword
+                      ? new Date(keyword)
+                      : null
                     : null
                 }
                 onChange={(date: Date | null) => {
@@ -197,9 +199,11 @@ export const SearchResultControlMenu: FC<Props> = ({
                     keyword: settingDateValue,
                   });
                 }}
-                renderInput={(params) => (
-                  <StyledTextField size="small" {...params} />
-                )}
+                slotProps={{
+                  textField: {
+                    size: "small",
+                  },
+                }}
               />
             </LocalizationProvider>
           </StyledBox>
@@ -209,11 +213,13 @@ export const SearchResultControlMenu: FC<Props> = ({
             </StyledTypography>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <DesktopDatePicker
-                inputFormat="yyyy/MM/dd"
+                format="yyyy/MM/dd"
                 value={
                   filterKey ===
                   AdvancedSearchResultAttrInfoFilterKeyEnum.TEXT_NOT_CONTAINED
                     ? keyword
+                      ? new Date(keyword)
+                      : null
                     : null
                 }
                 onChange={(date: Date | null) => {
@@ -231,9 +237,11 @@ export const SearchResultControlMenu: FC<Props> = ({
                     keyword: settingDateValue,
                   });
                 }}
-                renderInput={(params) => (
-                  <StyledTextField size="small" {...params} />
-                )}
+                slotProps={{
+                  textField: {
+                    size: "small",
+                  },
+                }}
               />
             </LocalizationProvider>
           </StyledBox>

diff --git a/frontend/src/components/entry/entryForm/DateAttributeValueField.tsx b/frontend/src/components/entry/entryForm/DateAttributeValueField.tsx
@@ -1,4 +1,4 @@
-import { Box, TextField, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
@@ -42,8 +42,8 @@ export const DateAttributeValueField: FC<Props> = ({
         render={({ field, fieldState: { error } }) => (
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DesktopDatePicker
-              inputFormat="yyyy/MM/dd"
-              value={field.value}
+              format="yyyy/MM/dd"
+              value={field.value ? new Date(field.value) : null}
               onChange={(date: Date | null) => {
                 let settingDateValue = "";
                 if (date !== null) {
@@ -56,15 +56,14 @@ export const DateAttributeValueField: FC<Props> = ({
                   shouldValidate: true,
                 });
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={error != null}
-                  helperText={error?.message}
-                  size="small"
-                  fullWidth={false}
-                />
-              )}
+              slotProps={{
+                textField: {
+                  error: error != null,
+                  helperText: error?.message,
+                  size: "small",
+                  fullWidth: false,
+                },
+              }}
               disabled={isDisabled}
             />
           </LocalizationProvider>

diff --git a/frontend/src/components/entry/entryForm/DateTimeAttributeValueField.tsx b/frontend/src/components/entry/entryForm/DateTimeAttributeValueField.tsx
@@ -1,4 +1,4 @@
-import { Box, TextField, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { DateTimePicker } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
@@ -42,32 +42,28 @@ export const DateTimeAttributeValueField: FC<Props> = ({
         render={({ field, fieldState: { error } }) => (
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DateTimePicker
-              inputFormat="yyyy/MM/dd HH:mm:ss"
-              value={field.value}
-              onChange={(
-                date: Date | null,
-                keyboardInputValue?: string | undefined
-              ) => {
+              format="yyyy/MM/dd HH:mm:ss"
+              value={field.value ? new Date(field.value) : null}
+              onChange={(date: Date | null) => {
                 setValue(
                   `attrs.${attrId}.value.asString`,
                   date != null && !isNaN(date.getTime()) // if the date is valid
                     ? date.toISOString()
-                    : keyboardInputValue,
+                    : "",
                   {
                     shouldDirty: true,
                     shouldValidate: true,
                   }
                 );
               }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  error={error != null}
-                  helperText={error?.message}
-                  size="small"
-                  fullWidth={false}
-                />
-              )}
+              slotProps={{
+                textField: {
+                  error: error != null,
+                  helperText: error?.message,
+                  size: "small",
+                  fullWidth: false,
+                },
+              }}
               disabled={isDisabled}
             />
           </LocalizationProvider>