Don't use ReferenceManyField, load experimental features manually

src/i18n/en.ts

@@ -160,6 +160,10 @@ const en: SynapseTranslationMessages = {
         delete_media: "Delete all media uploaded by the user(-s)",
         redact_events: "Redact all events sent by the user(-s)",
       },
+      experimental_features: {
+        msc3881: "enable remotely toggling push notifications for another client",
+        msc3575: "enable experimental sliding sync support",
+      },
     },
     rooms: {
       name: "Room |||| Rooms",

src/i18n/index.d.ts

@@ -156,6 +156,9 @@ interface SynapseTranslationMessages extends TranslationMessages {
         delete_media: string;
         redact_events: string;
       };
+      experimental_features?: {
+        [key: string]: string;
+      };
     };
     rooms: {
       name: string;

src/resources/users.tsx

@@ -10,7 +10,7 @@ import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputCompone
 import ScienceIcon from "@mui/icons-material/Science";
 import ViewListIcon from "@mui/icons-material/ViewList";
 import { useEffect, useState } from "react";
-import { Alert, Switch, FormControlLabel, Box, Stack } from "@mui/material";
+import { Alert, Switch, Stack, Typography } from "@mui/material";
 import {
   ArrayInput,
   ArrayField,
@@ -55,15 +55,12 @@ import {
   useNotify,
   Identifier,
   ToolbarClasses,
-  RaRecord,
   ImageInput,
   ImageField,
   FunctionField,
   useDataProvider,
-  SingleFieldList,
-  WithListContext,
 } from "react-admin";
-import { Form, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import AvatarField from "../components/AvatarField";
 import DeleteUserButton from "../components/DeleteUserButton";
@@ -72,6 +69,7 @@ import { ServerNoticeButton, ServerNoticeBulkButton } from "../components/Server
 import { DATE_FORMAT } from "../components/date";
 import { DeviceRemoveButton } from "../components/devices";
 import { MediaIDField, ProtectMediaButton, QuarantineMediaButton } from "../components/media";
+import { ExperimentalFeature, ExperimentalFeatures } from "../synapse/dataProvider";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -456,34 +454,63 @@ export const UserEdit = (props: EditProps) => {
         </FormTab>
 
         <FormTab label="Experimental" icon={<ScienceIcon />} path="experimental">
-          <ReferenceManyField reference="features" target="id" label={false}>
-            <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
-              <FeatureBooleanInput />
-            </Datagrid>
-          </ReferenceManyField>
+          <ExperimentalFeaturesList />
         </FormTab>
       </TabbedForm>
     </Edit>
   );
 };
 
-const FeatureBooleanInput = () => {
+const ExperimentalFeatureRow = (props: { featureKey: string, featureValue: boolean, updateFeature: (feature_name: string, feature_value: boolean) => void}) => {
+  const featureKey = props.featureKey;
+  const featureValue = props.featureValue;
+  const translate = useTranslate();
+  const translateString = `resources.users.experimental_features.${featureKey}`;
+  const [checked, setChecked] = useState(featureValue);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+    props.updateFeature(featureKey, event.target.checked);
+  };
+
+  return <Stack direction="row" spacing={2}>
+    <Typography variant="body1">{featureKey}</Typography>
+    <Typography variant="body1">{translate(translateString)}</Typography>
+    <Switch checked={checked} onChange={handleChange} />
+  </Stack>
+}
+
+const ExperimentalFeaturesList = () => {
   const record = useRecordContext();
+  const notify = useNotify();
+  const dataProvider = useDataProvider();
+  const [features, setFeatures] = useState({});
   if (!record) {
     return null;
   }
-  return (
+
+  useEffect(() => {
+    const fetchFeatures = async () => {
+      const features = await dataProvider.getFeatures(record.id);
+      setFeatures(features);
+    }
+
+    fetchFeatures();
+  }, []);
+
+  const updateFeature = async (feature_name: string, feature_value: boolean) => {
+    const updatedFeatures = {...features, [feature_name]: feature_value};
+    setFeatures(updatedFeatures);
+    const reponse = await dataProvider.updateFeatures(record.id, updatedFeatures);
+    notify("Feature updated", { type: "success" });
+  };
+
+  return <>
     <Stack direction="column" spacing={2}>
-      <TextField source="featureLabel" />
-      <BooleanInput
-        source="featureValue"
-        name={`features.${record.featureName}`}
-        label={record.featureName}
-      />
+      {Object.keys(features).map((featureKey: string) => <ExperimentalFeatureRow key={featureKey} featureKey={featureKey} featureValue={features[featureKey]} updateFeature={updateFeature} />)}
     </Stack>
-  );
-};
-
+  </>
+}
 const resource: ResourceProps = {
   name: "users",
   icon: UserIcon,

src/synapse/dataProvider.ts

@@ -183,9 +183,9 @@ interface Pusher {
   pushkey: string;
 }
 
-interface ExperimentalFeature {
-  name: string;
-  value: boolean;
+export interface ExperimentalFeature {
+  feature_name: string;
+  feature_value: boolean;
 }
 
 interface UserMedia {
@@ -369,17 +369,6 @@ const resourceMap = {
     data: "pushers",
     total: json => json.total,
   },
-  features: {
-    map: (f: ExperimentalFeature) => ({
-      ...f,
-      id: f.name,
-    }),
-    total: json => json.features.length,
-    reference: (id: Identifier) => ({
-      endpoint: `/_synapse/admin/v1/experimental_features/${id}`,
-    }),
-    data: "features",
-  },
   joined_rooms: {
     map: (jr: string) => ({
       id: jr,
@@ -546,11 +535,6 @@ function getSearchOrder(order: "ASC" | "DESC") {
   }
 }
 
-const featureLabels = {
-  msc3881: "enable remotely toggling push notifications for another client",
-  msc3575: "enable experimental sliding sync support",
-};
-
 const baseDataProvider: SynapseDataProvider = {
   getList: async (resource, params) => {
     console.log("getList " + resource);
@@ -652,14 +636,6 @@ const baseDataProvider: SynapseDataProvider = {
     const endpoint_url = `${homeserver}${ref.endpoint}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
     const { json } = await jsonClient(endpoint_url);
-    if (resource === "features") {
-      json.features = Object.entries(json.features).map(([feature, enabled]) => ({
-        featureName: feature,
-        featureValue: enabled,
-        featureLabel: featureLabels[feature],
-      }));
-      console.log("JSON", json[res.data]);
-    }
     return {
       data: json[res.data].map(res.map),
       total: res.total(json, from, perPage),
@@ -834,6 +810,12 @@ const baseDataProvider: SynapseDataProvider = {
     });
     return json as UploadMediaResult;
   },
+  getFeatures: async (id: Identifier) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/experimental_features/${encodeURIComponent(returnMXID(id))}`;
+    const { json } = await jsonClient(endpoint_url);
+    return json.features as ExperimentalFeatures;
+  },
   updateFeatures: async (id: Identifier, features: ExperimentalFeatures) => {
     const base_url = storage.getItem("base_url");
     const endpoint_url = `${base_url}/_synapse/admin/v1/experimental_features/${encodeURIComponent(returnMXID(id))}`;
@@ -849,10 +831,6 @@ const dataProvider = withLifecycleCallbacks(baseDataProvider, [
       const avatarFile = params.data.avatar_file?.rawFile;
       const avatarErase = params.data.avatar_erase;
 
-      if (params.data.features) {
-        await dataProvider.updateFeatures(params.id, params.data.features);
-      }
-
       if (avatarErase) {
         params.data.avatar_url = "";
         return params;