Finish upgrade

package.json

@@ -11,19 +11,23 @@
     "url": "https://github.com/etkecc/synapse-admin"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@eslint/js": "^9.7.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/lodash": "^4.17.7",
     "@types/node": "^20.14.12",
     "@types/papaparse": "^5.3.14",
     "@types/react": "^18.3.3",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -36,7 +40,7 @@
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^3.3.3",
     "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.16.1",
@@ -50,10 +54,10 @@
     "@haxqer/ra-language-chinese": "^4.16.2",
     "@mui/icons-material": "^6.1.1",
     "@mui/material": "^6.1.1",
+    "@tanstack/react-query": "^5.56.2",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
-    "query-string": "^9.1.0",
     "ra-core": "^5.2.0",
     "ra-i18n-polyglot": "^5.2.0",
     "ra-language-english": "^5.2.0",
@@ -66,7 +70,6 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-is": "^18.3.1",
-    "@tanstack/react-query": "^5.56.2",
     "react-router": "^6.26.2",
     "react-router-dom": "^6.26.2"
   },

src/App.test.tsx

@@ -1,10 +1,15 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import fetchMock from "jest-fetch-mock";
+fetchMock.enableMocks();
 
 import App from "./App";
 
 describe("App", () => {
   it("renders", async () => {
     render(<App />);
     await screen.findAllByText("Welcome to Synapse-admin");
+    // await waitFor(() => {
+    //   expect(screen.getByText("Welcome to Synapse-admin")).toBeInTheDocument();
+    // }, { timeout: 5000 });
   });
-});
+});

src/App.tsx

@@ -53,7 +53,6 @@ const App = () => (
     authProvider={authProvider}
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
-    darkTheme={{ palette: { mode: "dark" } }}
   >
     <CustomRoutes>
       <Route path="/import_users" element={<ImportFeature />} />

src/components/DeleteRoomButton.tsx

@@ -74,7 +74,6 @@ const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = (props) => {
           <DialogContentText>{translate(props.confirmContent)}</DialogContentText>
           <SimpleForm toolbar={false}>
             <BooleanInput
-              fullWidth
               source="block"
               value={block}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => setBlock(event.target.checked)}

src/components/ServerNotices.tsx

@@ -43,7 +43,6 @@ const ServerNoticeDialog = ({ open, onClose, onSubmit }) => {
           <TextInput
             source="body"
             label="resources.servernotices.fields.body"
-            fullWidth
             multiline
             rows="4"
             resettable

src/components/media.tsx

@@ -55,22 +55,19 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
         <DialogContentText>{translate("delete_media.helper.send")}</DialogContentText>
         <SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}>
           <DateTimeInput
-            fullWidth
             source="before_ts"
             label="delete_media.fields.before_ts"
             defaultValue={0}
             parse={dateParser}
           />
           <NumberInput
-            fullWidth
             source="size_gt"
             label="delete_media.fields.size_gt"
             defaultValue={0}
             min={0}
             step={1024}
           />
           <BooleanInput
-            fullWidth
             source="keep_profiles"
             label="delete_media.fields.keep_profiles"
             defaultValue={true}

src/pages/LoginPage.tsx

@@ -222,7 +222,6 @@ const LoginPage = () => {
             disabled={loading || !supportPassAuth}
             onBlur={handleUsernameChange}
             resettable
-            fullWidth
             validate={required()}
           />
         </Box>
@@ -234,7 +233,6 @@ const LoginPage = () => {
             autoComplete="current-password"
             disabled={loading || !supportPassAuth}
             resettable
-            fullWidth
             validate={required()}
           />
         </Box>
@@ -247,7 +245,6 @@ const LoginPage = () => {
             disabled={loading}
             readOnly={allowSingleBaseUrl}
             resettable={allowAnyBaseUrl}
-            fullWidth
             validate={[required(), validateBaseUrl]}
           >
             {allowMultipleBaseUrls &&
@@ -280,9 +277,9 @@ const LoginPage = () => {
           <Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>
           <Box className="form">
             <Select
+              fullWidth
               value={locale}
               onChange={e => setLocale(e.target.value)}
-              fullWidth
               disabled={loading}
               className="select"
             >
@@ -299,7 +296,6 @@ const LoginPage = () => {
                 type="submit"
                 color="primary"
                 disabled={loading || !supportPassAuth}
-                fullWidth
               >
                 {translate("ra.auth.sign_in")}
               </Button>
@@ -308,7 +304,6 @@ const LoginPage = () => {
                 color="secondary"
                 onClick={handleSSO}
                 disabled={loading || ssoBaseUrl === ""}
-                fullWidth
               >
                 {translate("synapseadmin.auth.sso_sign_in")}
               </Button>

src/resources/rooms.tsx

@@ -67,6 +67,9 @@ const RoomTitle = () => {
 
 const RoomShowActions = () => {
   const record = useRecordContext();
+  if (!record) {
+    return null;
+  }
   const publishButton = record?.public ? <RoomDirectoryUnpublishButton /> : <RoomDirectoryPublishButton />;
   // FIXME: refresh after (un)publish
   return (

src/resources/users.tsx

@@ -287,15 +287,20 @@ export const UserEdit = (props: EditProps) => {
   const translate = useTranslate();
 
   return (
-    <Edit {...props} title={<UserTitle />} actions={<UserEditActions />}>
+    <Edit {...props} title={<UserTitle />} actions={<UserEditActions />} mutationMode="pessimistic">
       <TabbedForm toolbar={<UserEditToolbar />}>
         <FormTab label={translate("resources.users.name", { smart_count: 1 })} icon={<PersonPinIcon />}>
           <AvatarField source="avatar_src" sortable={false} sx={{ height: "120px", width: "120px" }} />
           <BooleanInput source="avatar_erase" label="resources.users.action.erase_avatar" />
-          <ImageInput source="avatar_file" label="resources.users.fields.avatar" accept={{ 'image/*': [] }}>
-            <ImageField source="src" title="Avatar"  />
+          <ImageInput
+            source="avatar_file"
+            label="resources.users.fields.avatar"
+            // @ts-ignore
+            accept={{ "image/*": [".png", ".jpg"] }}
+          >
+            <ImageField source="src" title="Avatar" />
           </ImageInput>
-          <TextInput source="id" disabled />
+          <TextInput source="id" readOnly />
           <TextInput source="displayname" />
           <PasswordInput source="password" autoComplete="new-password" helperText="resources.users.helper.password" />
           <SelectInput source="user_type" choices={choices_type} translateChoice={false} resettable />

src/synapse/dataProvider.test.ts

@@ -3,6 +3,7 @@ import fetchMock from "jest-fetch-mock";
 import dataProvider from "./dataProvider";
 import storage from "../storage";
 
+
 fetchMock.enableMocks();
 
 beforeEach(() => {

src/synapse/dataProvider.ts

@@ -1,5 +1,3 @@
-import queryString from "query-string";
-
 import {
   DataProvider,
   DeleteParams,
@@ -54,6 +52,10 @@ const mxcUrlToHttp = (mxcUrl: string) => {
   return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
 };
 
+const filterUndefined = (obj: Record<string, any>) => {
+  return Object.fromEntries(Object.entries(obj).filter(([key, value]) => value !== undefined));
+};
+
 interface Room {
   room_id: string;
   name?: string;
@@ -552,7 +554,7 @@ const baseDataProvider: SynapseDataProvider = {
     const res = resourceMap[resource];
 
     const endpoint_url = homeserver + res.path;
-    const url = `${endpoint_url}?${queryString.stringify(query)}`;
+    const url = `${endpoint_url}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
     const { json } = await jsonClient(url);
     return {
@@ -606,7 +608,7 @@ const baseDataProvider: SynapseDataProvider = {
     const res = resourceMap[resource];
 
     const ref = res.reference(params.id);
-    const endpoint_url = `${homeserver}${ref.endpoint}?${queryString.stringify(query)}`;
+    const endpoint_url = `${homeserver}${ref.endpoint}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
     const { json } = await jsonClient(endpoint_url);
     return {
@@ -616,6 +618,7 @@ const baseDataProvider: SynapseDataProvider = {
   },
 
   update: async (resource, params) => {
+    console.log("update params " + JSON.stringify(params));
     console.log("update " + resource);
     const homeserver = storage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");

tsconfig.json

@@ -24,7 +24,7 @@
     /* Strict Type-Checking Options */
     "strict": true                            /* Enable all strict type-checking options. */,
     "noImplicitAny": false                    /* Raise error on expressions and declarations with an implied 'any' type. */,
-    // "strictNullChecks": true,              /* Enable strict null checks. */
+    "strictNullChecks": true,                 /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */