fix: Editor displayed as member in role menu

app/actions/definitions/users.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { UserRole } from "@shared/types";
 import { UserRoleHelper } from "@shared/utils/UserRoleHelper";
 import stores from "~/stores";
+import User from "~/models/User";
 import Invite from "~/scenes/Invite";
 import {
   UserChangeRoleDialog,
@@ -27,23 +28,21 @@ export const inviteUser = createAction({
   },
 });
 
-export const updateUserRoleActionFactory = (userId: string, role: UserRole) =>
+export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
   createAction({
-    name: ({ t }) => {
-      const user = stores.users.get(userId);
-
-      return UserRoleHelper.isRoleHigher(role, user!.role)
-        ? `${t("Promote to {{ role }}", { role })}…`
-        : `${t("Demote to {{ role }}", { role })}…`;
-    },
+    name: ({ t }) =>
+      UserRoleHelper.isRoleHigher(role, user!.role)
+        ? `${t("Promote to {{ role }}", {
+            role: UserRoleHelper.displayName(role, t),
+          })}…`
+        : `${t("Demote to {{ role }}", {
+            role: UserRoleHelper.displayName(role, t),
+          })}…`,
     analyticsName: "Update user role",
     section: UserSection,
     visible: ({ stores }) => {
-      const can = stores.policies.abilities(userId);
-      const user = stores.users.get(userId);
-      if (!user) {
-        return false;
-      }
+      const can = stores.policies.abilities(user.id);
+
       return UserRoleHelper.isRoleHigher(role, user.role)
         ? can.promote
         : UserRoleHelper.isRoleLower(role, user.role)
@@ -51,11 +50,6 @@ export const updateUserRoleActionFactory = (userId: string, role: UserRole) =>
         : false;
     },
     perform: ({ t }) => {
-      const user = stores.users.get(userId);
-      if (!user) {
-        return;
-      }
-
       stores.dialogs.openModal({
         title: t("Update role"),
         content: (

app/menus/UserMenu.tsx

@@ -108,7 +108,7 @@ function UserMenu({ user }: Props) {
               items: [UserRole.Admin, UserRole.Member, UserRole.Viewer].map(
                 (role) =>
                   actionToMenuItem(
-                    updateUserRoleActionFactory(user.id, role),
+                    updateUserRoleActionFactory(user, role),
                     context
                   )
               ),

shared/utils/UserRoleHelper.ts

@@ -1,3 +1,4 @@
+import { type TFunction } from "i18next";
 import { UserRole } from "../types";
 
 interface User {
@@ -5,6 +6,26 @@ interface User {
 }
 
 export class UserRoleHelper {
+  /**
+   * Get the display name for a role.
+   *
+   * @param role The role to get the display name for
+   * @param t The translation function
+   * @returns The display name for the role
+   */
+  static displayName(role: UserRole, t: TFunction): string {
+    switch (role) {
+      case UserRole.Guest:
+        return t("Guest");
+      case UserRole.Viewer:
+        return t("Viewer");
+      case UserRole.Member:
+        return t("Editor");
+      case UserRole.Admin:
+        return t("Admin");
+    }
+  }
+
   /**
    * Check if the first role is higher than the second role.
    *