Add "Assign Admin" button to the rooms (#156)

* wip on make admin button * Finish assign admin button * fixes from pr * update readme; remove unnecessary console.log; add assign admin to room directory and room view; rename user_id label; set own MXID by default; fix room name display when there is no name
2024-11-21 15:25:22 +03:00 · 2024-11-21 07:11:48 +02:00 · 2024-11-21 07:11:48 +02:00 · cb1314ab1d
commit cb1314ab1d
parent dae6872fe8
13 changed files with 204 additions and 31 deletions
--- a/README.md
+++ b/README.md
@ -97,6 +97,7 @@ The following changes are already implemented:
 * 🛑 [Prevent accidental user overwrites](https://github.com/etkecc/synapse-admin/pull/139)
 * 🔍 [Allow providing login form details via GET params](https://github.com/etkecc/synapse-admin/pull/140)
 * 🎨 [Add preferred theme colors to login page and footer](https://github.com/etkecc/synapse-admin/pull/155)
+* 🔰 [Add "Assign Admin" button to the rooms](https://github.com/etkecc/synapse-admin/pull/156)

 _the list will be updated as new changes are added_

--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -13,8 +13,6 @@ const Footer = () => {
    }
  }, []);

-  console.log(theme);
-
  return (<Box
    component="footer"
    sx={{
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@ -260,6 +260,14 @@ const de: SynapseTranslationMessages = {
          success: "Raum/Räume erfolgreich gelöscht.",
          failure: "Der/die Raum/Räume konnten nicht gelöscht werden.",
        },
+        make_admin: {
+          assign_admin: "Raumadministrator zuweisen",
+          title: "Raumadministrator zu %{roomName} zuweisen",
+          confirm: "Raumadministrator zuweisen",
+          content: "Geben Sie die vollständige MXID des Benutzers an, der als Administrator gesetzt werden soll.\nWarnung: Damit dies funktioniert, muss der Raum mindestens einen lokalen Mitglied als Administrator haben.",
+          success: "Der/die Benutzer wurde/n als Raumadministrator gesetzt.",
+          failure: "Der/die Benutzer konnte/n nicht als Raumadministrator gesetzt werden. %{errMsg}",
+        }
      },
    },
    reports: {
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@ -38,7 +38,7 @@ const en: SynapseTranslationMessages = {
        members: "Members",
        detail: "Details",
        permission: "Permissions",
-      },
+      }
    },
    reports: { tabs: { basic: "Basic", detail: "Details" } },
  },
@ -233,6 +233,14 @@ const en: SynapseTranslationMessages = {
          success: "Room/s successfully deleted.",
          failure: "The room/s could not be deleted.",
        },
+        make_admin: {
+          assign_admin: "Assign admin",
+          title: "Assign a room admin to %{roomName}",
+          confirm: "Make admin",
+          content: "Put the full MXID of the user which will be set as admin.\nWarning: for this to work, the room needs to have at least one local member as admin.",
+          success: "The user has been set as room admin.",
+          failure: "The user could not be set as room admin. %{errMsg}",
+        }
      },
    },
    reports: {
--- a/src/i18n/fa.ts
+++ b/src/i18n/fa.ts
@ -225,6 +225,14 @@ const fa: SynapseTranslationMessages = {
          success: "اتاق با موفقیت حذف شد.",
          failure: "خطایی رخ داده است.",
        },
+        make_admin: {
+          assign_admin: "مدیر انتخاب کنید",
+          title: "مدیر اتاق %{roomName} را انتخاب کنید",
+          confirm: "مدیر انتخاب کنید",
+          content: "کامل MXID کاربری را وارد کنید که به عنوان مدیر تنظیم شود.\nهشدار: برای این کار، اتاق باید حداقل یک اعضای محلی به عنوان مدیر داشته باشد.",
+          success: "کاربر به عنوان مدیر اتاق تنظیم شد.",
+          failure: "کاربر به عنوان مدیر اتاق تنظیم نشد. %{errMsg}",
+        }
      },
    },
    reports: {
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@ -227,6 +227,14 @@ const fr: SynapseTranslationMessages = {
          success: "Salle/s supprimées avec succès.",
          failure: "La/les salle/s n'ont pas pu être supprimées.",
        },
+        make_admin: {
+          assign_admin: "Assigner un administrateur",
+          title: "Assigner un administrateur au salon %{roomName}",
+          confirm: "Assigner un administrateur",
+          content: "Entrez la MXID complète de l'utilisateur qui sera désigné comme administrateur.\nAttention : pour que cela fonctionne, la salle doit avoir au moins un membre local en tant qu'administrateur.",
+          success: "L'utilisateur a été désigné comme administrateur de la salle.",
+          failure: "L'utilisateur n'a pas pu être désigné comme administrateur de la salle. %{errMsg}",
+        }
      },
    },
    reports: {
--- a/src/i18n/index.d.ts
+++ b/src/i18n/index.d.ts
@ -223,6 +223,14 @@ interface SynapseTranslationMessages extends TranslationMessages {
          success: string;
          failure: string;
        };
+        make_admin: {
+          assign_admin: string;
+          title: string;
+          confirm: string;
+          content: string;
+          success: string;
+          failure: string;
+        };
      };
    };
    reports: {
--- a/src/i18n/it.ts
+++ b/src/i18n/it.ts
@ -221,6 +221,14 @@ const it: SynapseTranslationMessages = {
        content:
          "Sei sicuro di voler eliminare questa stanza? Questa azione è definitiva. Tutti i messaggi e i media condivisi in questa stanza verranno eliminati dal server!",
      },
+      make_admin: {
+        assign_admin: "Assegna un amministratore",
+        title: "Assegna un amministratore alla stanza %{roomName}",
+        confirm: "Assegna un amministratore",
+        content: "Inserisci la MXID completa dell'utente che sarà designato come amministratore.\nAttenzione: per questo funzionare, la stanza deve avere almeno un membro locale come amministratore.",
+        success: "L'utente è stato designato come amministratore della stanza.",
+        failure: "L'utente non può essere designato come amministratore della stanza. %{errMsg}",
+      }
    },
  },
  reports: {
--- a/src/i18n/ru.ts
+++ b/src/i18n/ru.ts
@ -266,6 +266,14 @@ const ru: SynapseTranslationMessages = {
            success: "Комната/ы успешно удалены",
            failure: "Комната/ы не могут быть удалены.",
          },
+          make_admin: {
+            assign_admin: "Назначить администратора",
+            title: "Назначить администратора комнате %{roomName}",
+            confirm: "Назначить администратора",
+            content: "Введите полную MXID пользователя, которого нужно назначить администратором.\nПредупреждение: для этого должен быть назначен хотя бы один локальный участник в качестве администратора.",
+            success: "Пользователь назначен администратором комнаты.",
+            failure: "Пользователь не может быть назначен администратором комнаты. %{errMsg}",
+          }
        },
      },
      reports: {
--- a/src/resources/room_directory.tsx
+++ b/src/resources/room_directory.tsx
@ -27,8 +27,7 @@ import {
 } from "react-admin";
 import { useMutation } from "@tanstack/react-query";
 import AvatarField from "../components/AvatarField";
-
-
+import { MakeAdminBtn } from "./rooms";
 const RoomDirectoryPagination = () => <Pagination rowsPerPageOptions={[100, 500, 1000, 2000]} />;

 export const RoomDirectoryUnpublishButton = (props: DeleteButtonProps) => {
@ -154,6 +153,7 @@ export const RoomDirectoryList = () => (
      <NumberField source="num_joined_members" sortable={false} label="resources.rooms.fields.joined_members" />
      <BooleanField source="world_readable" sortable={false} label="resources.room_directory.fields.world_readable" />
      <BooleanField source="guest_can_join" sortable={false} label="resources.room_directory.fields.guest_can_join" />
+      <MakeAdminBtn />
    </DatagridConfigurable>
  </List>
 );
--- a/src/resources/rooms.tsx
+++ b/src/resources/rooms.tsx
@ -11,11 +11,11 @@ import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
 import {
  BooleanField,
-  BulkDeleteButton,
  DateField,
+  EditButton,
+  WrapperField,
  Datagrid,
  DatagridConfigurable,
-  DeleteButton,
  ExportButton,
  FunctionField,
  List,
@ -32,13 +32,15 @@ import {
  ShowProps,
  Tab,
  TabbedShowLayout,
-  TextField,
+  TextField as RaTextField,
  TopToolbar,
  useRecordContext,
  useTranslate,
  useListContext,
+  useNotify,
 } from "react-admin";

+import TextField from "@mui/material/TextField";
 import {
  RoomDirectoryBulkUnpublishButton,
  RoomDirectoryBulkPublishButton,
@ -48,7 +50,14 @@ import {
 import { DATE_FORMAT } from "../components/date";
 import DeleteRoomButton from "../components/DeleteRoomButton";
 import AvatarField from "../components/AvatarField";
-
+import { Room } from "../synapse/dataProvider";
+import { useMutation } from "@tanstack/react-query";
+import { useDataProvider } from "react-admin";
+import { Confirm } from "react-admin";
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import PersonIcon from '@mui/icons-material/Person';
+import Typography from "@mui/material/Typography";
 const RoomPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;

 const RoomTitle = () => {
@ -76,6 +85,7 @@ const RoomShowActions = () => {
  return (
    <TopToolbar>
      {publishButton}
+      <MakeAdminBtn />
      <DeleteRoomButton
        selectedIds={[record.id]}
        confirmTitle="resources.rooms.action.erase.title"
@ -85,8 +95,97 @@ const RoomShowActions = () => {
  );
 };

+export const MakeAdminBtn = () => {
+  const record = useRecordContext() as Room;
+
+  if (!record) {
+    return null;
+  }
+
+  if (record.joined_local_members < 1) {
+    return null;
+  }
+
+
+  const ownMXID = localStorage.getItem("user_id") || "";
+  const [open, setOpen] = useState(false);
+  const [userIdValue, setUserIdValue] = useState(ownMXID);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const translate = useTranslate();
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: async () => {
+      try {
+        const result = await dataProvider.makeRoomAdmin(record.room_id, userIdValue);
+        if (!result.success) {
+          throw new Error(result.error);
+        }
+      } catch (error) {
+        throw error;
+      }
+    },
+    onSuccess: () => {
+      notify("resources.rooms.action.make_admin.success", { type: "success" });
+      setOpen(false);
+      setUserIdValue("");
+    },
+    onError: (err) => {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      notify("resources.rooms.action.make_admin.failure", { type: "error", messageArgs: { errMsg: errorMessage } });
+      setOpen(false);
+      setUserIdValue("");
+    }
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setUserIdValue(event.target.value);
+  };
+
+  const handleConfirm = async () => {
+    mutate();
+    setOpen(false);
+  };
+
+  const handleDialogClose = () => {
+    setOpen(false);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      handleConfirm();
+    }
+  };
+
+  return (<>
+      <Button size="small" onClick={(e) => { e.stopPropagation(); setOpen(true); }} disabled={isPending}>
+        <PersonIcon /> {translate("resources.rooms.action.make_admin.assign_admin")}
+      </Button>
+      <Confirm
+        isOpen={open}
+        onConfirm={handleConfirm}
+        onClose={handleDialogClose}
+        confirm="resources.rooms.action.make_admin.confirm"
+        cancel="ra.action.cancel"
+        title={translate("resources.rooms.action.make_admin.title", { roomName: record.name ? record.name : record.room_id })}
+        content={<>
+          <Typography sx={{ marginBottom: 2, whiteSpace: "pre-line"}}>{translate("resources.rooms.action.make_admin.content")}</Typography>
+          <TextField
+            type="text"
+            variant="filled"
+            value={userIdValue}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            label={"Matrix ID"}
+          />
+        </>}
+      />
+  </>);
+};
+
 export const RoomShow = (props: ShowProps) => {
  const translate = useTranslate();
+  const record = useRecordContext();
  return (
    <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
      <TabbedShowLayout>
@ -96,28 +195,29 @@ export const RoomShow = (props: ShowProps) => {
            sx={{ height: "120px", width: "120px" }}
            label="resources.rooms.fields.avatar"
          />
-          <TextField source="room_id" />
-          <TextField source="name" />
-          <TextField source="topic" />
-          <TextField source="canonical_alias" />
+          <RaTextField source="room_id" />
+          <RaTextField source="name" />
+          <RaTextField source="topic" />
+          <RaTextField source="canonical_alias" />
          <ReferenceField source="creator" reference="users">
-            <TextField source="id" />
+            <RaTextField source="id" />
          </ReferenceField>
        </Tab>

        <Tab label="synapseadmin.rooms.tabs.detail" icon={<PageviewIcon />} path="detail">
-          <TextField source="joined_members" />
-          <TextField source="joined_local_members" />
-          <TextField source="joined_local_devices" />
-          <TextField source="state_events" />
-          <TextField source="version" />
-          <TextField source="encryption" emptyText={translate("resources.rooms.enums.unencrypted")} />
+          <RaTextField source="joined_members" />
+          <RaTextField source="joined_local_members" />
+          <RaTextField source="joined_local_devices" />
+          <RaTextField source="state_events" />
+          <RaTextField source="version" />
+          <RaTextField source="encryption" emptyText={translate("resources.rooms.enums.unencrypted")} />
        </Tab>

        <Tab label="synapseadmin.rooms.tabs.members" icon={<UserIcon />} path="members">
+          <MakeAdminBtn />
          <ReferenceManyField reference="room_members" target="room_id" label={false}>
            <Datagrid style={{ width: "100%" }} rowClick={id => "/users/" + id} bulkActionButtons={false}>
-              <TextField source="id" sortable={false} label="resources.users.fields.id" />
+              <RaTextField source="id" sortable={false} label="resources.users.fields.id" />
              <ReferenceField
                label="resources.users.fields.displayname"
                source="id"
@ -125,7 +225,7 @@ export const RoomShow = (props: ShowProps) => {
                sortable={false}
                link=""
              >
-                <TextField source="displayname" sortable={false} />
+                <RaTextField source="displayname" sortable={false} />
              </ReferenceField>
            </Datagrid>
          </ReferenceManyField>
@ -185,11 +285,11 @@ export const RoomShow = (props: ShowProps) => {
        <Tab label={translate("resources.room_state.name", { smart_count: 2 })} icon={<EventIcon />} path="state">
          <ReferenceManyField reference="room_state" target="room_id" label={false}>
            <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
-              <TextField source="type" sortable={false} />
+              <RaTextField source="type" sortable={false} />
              <DateField source="origin_server_ts" showTime options={DATE_FORMAT} sortable={false} />
              <FunctionField source="content" sortable={false} render={record => `${JSON.stringify(record.content, null, 2)}`} />
              <ReferenceField source="sender" reference="users" sortable={false}>
-                <TextField source="id" />
+                <RaTextField source="id" />
              </ReferenceField>
            </Datagrid>
          </ReferenceManyField>
@ -206,10 +306,10 @@ export const RoomShow = (props: ShowProps) => {
          </Box>
          <ReferenceManyField reference="forward_extremities" target="room_id" label={false}>
            <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
-              <TextField source="id" sortable={false} />
+              <RaTextField source="id" sortable={false} />
              <DateField source="received_ts" showTime options={DATE_FORMAT} sortable={false} />
              <NumberField source="depth" sortable={false} />
-              <TextField source="state_group" sortable={false} />
+              <RaTextField source="state_group" sortable={false} />
            </Datagrid>
          </ReferenceManyField>
        </Tab>
@ -270,12 +370,13 @@ export const RoomList = (props: ListProps) => {
          }}
        />
        <FunctionField source="name" render={record => record["name"] || record["canonical_alias"] || record["id"]} />
-        <TextField source="joined_members" />
-        <TextField source="joined_local_members" />
-        <TextField source="state_events" />
-        <TextField source="version" />
+        <RaTextField source="joined_members" />
+        <RaTextField source="joined_local_members" />
+        <RaTextField source="state_events" />
+        <RaTextField source="version" />
        <BooleanField source="federatable" />
        <BooleanField source="public" />
+        <MakeAdminBtn />
      </DatagridConfigurable>
    </List>
  );
--- a/src/resources/users.tsx
+++ b/src/resources/users.tsx
@ -79,6 +79,7 @@ import { useFormContext } from "react-hook-form";
 import { ExperimentalFeaturesList } from "../components/ExperimentalFeatures";
 import { UserRateLimits } from "../components/UserRateLimits";
 import { User, UsernameAvailabilityResult } from "../synapse/dataProvider";
+import { MakeAdminBtn } from "./rooms";

 const choices_medium = [
  { id: "email", name: "resources.users.email" },
@ -526,6 +527,7 @@ export const UserEdit = (props: EditProps) => {
              >
                <TextField source="name" sortable={false} />
              </ReferenceField>
+              <MakeAdminBtn />
            </Datagrid>
          </ReferenceManyField>
        </FormTab>
--- a/src/synapse/dataProvider.ts
+++ b/src/synapse/dataProvider.ts
@ -52,7 +52,7 @@ interface Action {
  body?: Record<string, any>;
 }

-interface Room {
+export interface Room {
  room_id: string;
  name?: string;
  canonical_alias?: string;
@ -273,6 +273,7 @@ export interface SynapseDataProvider extends DataProvider {
  getRateLimits: (id: Identifier) => Promise<RateLimitsModel>;
  setRateLimits: (id: Identifier, rateLimits: RateLimitsModel) => Promise<void>;
  checkUsernameAvailability: (username: string) => Promise<UsernameAvailabilityResult>;
+  makeRoomAdmin: (room_id: string, user_id: string) => Promise<{ success: boolean; error?: string; errcode?: string }>;
 }

 const resourceMap = {
@ -866,6 +867,20 @@ const baseDataProvider: SynapseDataProvider = {
      }
      throw error;
    }
+  },
+  makeRoomAdmin: async (room_id: string, user_id: string) => {
+    const base_url = storage.getItem("base_url");
+
+    const endpoint_url = `${base_url}/_synapse/admin/v1/rooms/${encodeURIComponent(room_id)}/make_room_admin`;
+    try {
+      const { json } = await jsonClient(endpoint_url, { method: "POST", body: JSON.stringify({ user_id }) });
+      return { success: true };
+    } catch (error) {
+      if (error instanceof HttpError) {
+        return { success: false, error: error.body.error, errcode: error.body.errcode };
+      }
+      throw error;
+    }
  }
 };