Allow admin to change member's name (#5233)

* feat: allow admins to change user names

* fix: review

app/menus/UserMenu.tsx

@@ -11,6 +11,7 @@ import {
   UserChangeToMemberDialog,
   UserChangeToViewerDialog,
   UserSuspendDialog,
+  UserChangeNameDialog,
 } from "~/components/UserRoleDialogs";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -80,6 +81,20 @@ function UserMenu({ user }: Props) {
     [dialogs, t, user]
   );
 
+  const handleChangeName = React.useCallback(
+    (ev: React.SyntheticEvent) => {
+      ev.preventDefault();
+      dialogs.openModal({
+        title: t("Change name"),
+        isCentered: true,
+        content: (
+          <UserChangeNameDialog user={user} onSubmit={dialogs.closeAllModals} />
+        ),
+      });
+    },
+    [dialogs, t, user]
+  );
+
   const handleSuspend = React.useCallback(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
@@ -154,6 +169,12 @@ function UserMenu({ user }: Props) {
               onClick: handlePromote,
               visible: can.promote && user.role !== "admin",
             },
+            {
+              type: "button",
+              title: `${t("Change name")}…`,
+              onClick: handleChangeName,
+              visible: can.update && user.role !== "admin",
+            },
             {
               type: "button",
               title: t("Resend invite"),