Move experimental features to their own components, improve UI

src/components/ExperimentalFeatures.tsx

@@ -0,0 +1,100 @@
+import { useRecordContext } from "react-admin";
+import { useNotify } from "react-admin";
+import { useDataProvider } from "react-admin";
+import { useState, useEffect } from "react";
+import { Stack, Switch, Typography } from "@mui/material";
+import { ExperimentalFeaturesModel, SynapseDataProvider } from "../synapse/dataProvider";
+
+const experimentalFeaturesMap = {
+    msc3881: "enable remotely toggling push notifications for another client",
+    msc3575: "enable experimental sliding sync support",
+};
+const ExperimentalFeatureRow = (props: { featureKey: string, featureValue: boolean, updateFeature: (feature_name: string, feature_value: boolean) => void}) => {
+    const featureKey = props.featureKey;
+    const featureValue = props.featureValue;
+    const featureDescription = experimentalFeaturesMap[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}
+        alignItems="start"
+        sx={{
+            padding: 2,
+            borderRadius: 1,
+            backgroundColor: "background.paper",
+            "&:hover": {
+                backgroundColor: "action.hover"
+            }
+        }}
+    >
+        <Switch checked={checked} onChange={handleChange} />
+        <Stack>
+            <Typography
+                variant="subtitle1"
+                sx={{
+                    fontWeight: "medium",
+                    color: "text.primary"
+                }}
+            >
+                {featureKey}
+            </Typography>
+            <Typography
+                variant="body2"
+                color="text.secondary"
+            >
+                {featureDescription}
+            </Typography>
+        </Stack>
+    </Stack>
+}
+
+export const ExperimentalFeaturesList = () => {
+    const record = useRecordContext();
+    const notify = useNotify();
+    const dataProvider = useDataProvider() as SynapseDataProvider;
+    const [features, setFeatures] = useState({});
+    if (!record) {
+        return null;
+    }
+
+    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} as ExperimentalFeaturesModel;
+        setFeatures(updatedFeatures);
+        const reponse = await dataProvider.updateFeatures(record.id, updatedFeatures);
+        notify("ra.notification.updated", {
+            messageArgs: { smart_count: 1 },
+            type: "success",
+        });
+    };
+
+    return <>
+        <Stack
+            direction="column"
+            spacing={1}
+        >
+            {Object.keys(features).map((featureKey: string) =>
+                <ExperimentalFeatureRow
+                    key={featureKey}
+                    featureKey={featureKey}
+                    featureValue={features[featureKey]}
+                    updateFeature={updateFeature}
+                />
+            )}
+        </Stack>
+    </>
+}

src/i18n/en.ts

@@ -159,11 +159,7 @@ const en: SynapseTranslationMessages = {
         erase_avatar: "Erase avatar",
         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,9 +156,6 @@ interface SynapseTranslationMessages extends TranslationMessages {
         delete_media: string;
         redact_events: string;
       };
-      experimental_features?: {
-        [key: string]: string;
-      };
     };
     rooms: {
       name: string;

src/resources/users.tsx

@@ -69,7 +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";
+import { ExperimentalFeaturesList } from "../components/ExperimentalFeatures";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -461,56 +461,6 @@ export const UserEdit = (props: EditProps) => {
   );
 };
 
-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;
-  }
-
-  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}>
-      {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

@@ -248,7 +248,7 @@ export interface UploadMediaResult {
   content_uri: string;
 }
 
-export interface ExperimentalFeatures {
+export interface ExperimentalFeaturesModel {
   features: {
     [key: string]: boolean;
   };
@@ -257,7 +257,7 @@ export interface ExperimentalFeatures {
 export interface SynapseDataProvider extends DataProvider {
   deleteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
   uploadMedia: (params: UploadMediaParams) => Promise<UploadMediaResult>;
-  updateFeatures: (id: Identifier, features: ExperimentalFeatures) => Promise<void>;
+  updateFeatures: (id: Identifier, features: ExperimentalFeaturesModel) => Promise<void>;
 }
 
 const resourceMap = {
@@ -809,9 +809,9 @@ const baseDataProvider: SynapseDataProvider = {
     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;
+    return json.features as ExperimentalFeaturesModel;
   },
-  updateFeatures: async (id: Identifier, features: ExperimentalFeatures) => {
+  updateFeatures: async (id: Identifier, features: ExperimentalFeaturesModel) => {
     const base_url = storage.getItem("base_url");
     const endpoint_url = `${base_url}/_synapse/admin/v1/experimental_features/${encodeURIComponent(returnMXID(id))}`;
     await jsonClient(endpoint_url, { method: "PUT", body: JSON.stringify({ features }) });