fix: Cleanup user menu (#4532)

Move confirmation dialogs from window confirmations

app/components/Modal.tsx

@@ -252,8 +252,9 @@ const Small = styled.div`
   animation: ${fadeAndScaleIn} 250ms ease;
 
   margin: auto auto;
+  width: 30vw;
   min-width: 350px;
-  max-width: 30vw;
+  max-width: 450px;
   z-index: ${depths.modal};
   display: flex;
   justify-content: center;

app/components/UserRoleDialogs.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import User from "~/models/User";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  user: User;
+  onSubmit: () => void;
+};
+
+export function UserChangeToViewerDialog({ user, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { users } = useStores();
+
+  const handleSubmit = async () => {
+    await users.demote(user, "viewer");
+    onSubmit();
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Confirm")}
+      savingText={`${t("Saving")}…`}
+    >
+      {t(
+        "Are you sure you want to make {{ userName }} a read-only viewer? They will not be able to edit any content",
+        {
+          userName: user.name,
+        }
+      )}
+      .
+    </ConfirmationDialog>
+  );
+}
+
+export function UserChangeToMemberDialog({ user, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { users } = useStores();
+
+  const handleSubmit = async () => {
+    await users.demote(user, "member");
+    onSubmit();
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Confirm")}
+      savingText={`${t("Saving")}…`}
+    >
+      {t("Are you sure you want to make {{ userName }} a member?", {
+        userName: user.name,
+      })}
+    </ConfirmationDialog>
+  );
+}
+
+export function UserChangeToAdminDialog({ user, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { users } = useStores();
+
+  const handleSubmit = async () => {
+    await users.promote(user);
+    onSubmit();
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Confirm")}
+      savingText={`${t("Saving")}…`}
+    >
+      {t(
+        "Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
+        {
+          userName: user.name,
+        }
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export function UserSuspendDialog({ user, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const { users } = useStores();
+
+  const handleSubmit = async () => {
+    await users.suspend(user);
+    onSubmit();
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Confirm")}
+      savingText={`${t("Saving")}…`}
+    >
+      {t(
+        "Are you sure you want to suspend {{ userName }}? Suspended users will be prevented from logging in.",
+        {
+          userName: user.name,
+        }
+      )}
+    </ConfirmationDialog>
+  );
+}

app/menus/UserMenu.tsx

@@ -6,6 +6,12 @@ import User from "~/models/User";
 import ContextMenu from "~/components/ContextMenu";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
 import Template from "~/components/ContextMenu/Template";
+import {
+  UserChangeToAdminDialog,
+  UserChangeToMemberDialog,
+  UserChangeToViewerDialog,
+  UserSuspendDialog,
+} from "~/components/UserRoleDialogs";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
@@ -15,7 +21,7 @@ type Props = {
 };
 
 function UserMenu({ user }: Props) {
-  const { users } = useStores();
+  const { users, dialogs } = useStores();
   const { t } = useTranslation();
   const menu = useMenuState({
     modal: true,
@@ -26,83 +32,66 @@ function UserMenu({ user }: Props) {
   const handlePromote = React.useCallback(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
-
-      if (
-        !window.confirm(
-          t(
-            "Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
-            {
-              userName: user.name,
-            }
-          )
-        )
-      ) {
-        return;
-      }
-
-      users.promote(user);
+      dialogs.openModal({
+        title: t("Change role to admin"),
+        isCentered: true,
+        content: (
+          <UserChangeToAdminDialog
+            user={user}
+            onSubmit={dialogs.closeAllModals}
+          />
+        ),
+      });
     },
-    [users, user, t]
+    [dialogs, t, user]
   );
 
   const handleMember = React.useCallback(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
-
-      if (
-        !window.confirm(
-          t("Are you sure you want to make {{ userName }} a member?", {
-            userName: user.name,
-          })
-        )
-      ) {
-        return;
-      }
-
-      users.demote(user, "member");
+      dialogs.openModal({
+        title: t("Change role to member"),
+        isCentered: true,
+        content: (
+          <UserChangeToMemberDialog
+            user={user}
+            onSubmit={dialogs.closeAllModals}
+          />
+        ),
+      });
     },
-    [users, user, t]
+    [dialogs, t, user]
   );
 
   const handleViewer = React.useCallback(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
-
-      if (
-        !window.confirm(
-          t(
-            "Are you sure you want to make {{ userName }} a read-only viewer? They will not be able to edit any content",
-            {
-              userName: user.name,
-            }
-          )
-        )
-      ) {
-        return;
-      }
-
-      users.demote(user, "viewer");
+      dialogs.openModal({
+        title: t("Change role to viewer"),
+        isCentered: true,
+        content: (
+          <UserChangeToViewerDialog
+            user={user}
+            onSubmit={dialogs.closeAllModals}
+          />
+        ),
+      });
     },
-    [users, user, t]
+    [dialogs, t, user]
   );
 
   const handleSuspend = React.useCallback(
     (ev: React.SyntheticEvent) => {
       ev.preventDefault();
-
-      if (
-        !window.confirm(
-          t(
-            "Are you sure you want to suspend this account? Suspended users will be prevented from logging in."
-          )
-        )
-      ) {
-        return;
-      }
-
-      users.suspend(user);
+      dialogs.openModal({
+        title: t("Suspend account"),
+        isCentered: true,
+        content: (
+          <UserSuspendDialog user={user} onSubmit={dialogs.closeAllModals} />
+        ),
+      });
     },
-    [users, user, t]
+    [dialogs, t, user]
   );
 
   const handleRevoke = React.useCallback(
@@ -149,25 +138,19 @@ function UserMenu({ user }: Props) {
           items={[
             {
               type: "button",
-              title: t("Make {{ userName }} a member", {
-                userName: user.name,
-              }),
+              title: `${t("Change role to member")}…`,
               onClick: handleMember,
               visible: can.demote && user.role !== "member",
             },
             {
               type: "button",
-              title: t("Make {{ userName }} a viewer", {
-                userName: user.name,
-              }),
+              title: `${t("Change role to viewer")}…`,
               onClick: handleViewer,
               visible: can.demote && user.role !== "viewer",
             },
             {
               type: "button",
-              title: t("Make {{ userName }} an admin…", {
-                userName: user.name,
-              }),
+              title: `${t("Change role to admin")}…`,
               onClick: handlePromote,
               visible: can.promote && user.role !== "admin",
             },