fix: Cleanup user menu (#4532)

Move confirmation dialogs from window confirmations
2022-12-03 15:33:16 -08:00
parent d6d1eb4485
commit 13db16283a
4 changed files with 171 additions and 78 deletions
--- a/app/components/UserRoleDialogs.tsx
+++ b/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>
+  );
+}