headplane/app/routes/users/dialogs/reassign-user.tsx

import Dialog from "~/components/Dialog";
import Link from "~/components/link";
import Notice from "~/components/Notice";
import RadioGroup from "~/components/RadioGroup";
import { Roles } from "~/server/web/roles";
import { User } from "~/types";

interface ReassignProps {
  user: User & { headplaneRole: string };
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
}

export default function ReassignUser({ user, isOpen, setIsOpen }: ReassignProps) {
  return (
    <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
      <Dialog.Panel variant={user.headplaneRole === "owner" ? "unactionable" : "normal"}>
        <Dialog.Title>Change role for {user.name || user.displayName}?</Dialog.Title>
        <Dialog.Text className="mb-6">
          Most roles are carried straight from Tailscale. However, keep in mind that I have not
          fully implemented permissions yet and some things may be accessible to everyone. The only
          fully completed role is Member.{" "}
          <Link external styled to="https://tailscale.com/kb/1138/user-roles">
            Learn More
          </Link>
        </Dialog.Text>
        {user.headplaneRole === "owner" ? (
          <Notice>The Tailnet owner cannot be reassigned.</Notice>
        ) : (
          <>
            <input name="action_id" type="hidden" value="reassign_user" />
            <input name="user_id" type="hidden" value={user.id} />
            <RadioGroup
              className="gap-4"
              defaultValue={user.headplaneRole}
              isRequired
              label="Role"
              name="new_role"
            >
              {Object.keys(Roles)
                .filter((role) => role !== "owner")
                .map((role) => {
                  const { name, desc } = mapRoleToName(role);
                  return (
                    <RadioGroup.Radio key={role} label={name} value={role}>
                      <div className="block">
                        <p className="font-bold">{name}</p>
                        <p className="opacity-70">{desc}</p>
                      </div>
                    </RadioGroup.Radio>
                  );
                })}
            </RadioGroup>
          </>
        )}
      </Dialog.Panel>
    </Dialog>
  );
}

function mapRoleToName(role: string) {
  switch (role) {
    case "admin":
      return {
        name: "Admin",
        desc: "Can view the admin console, manage network, machine, and user settings.",
      };
    case "network_admin":
      return {
        name: "Network Admin",
        desc: "Can view the admin console and manage ACLs and network settings. Cannot manage machines or users.",
      };
    case "it_admin":
      return {
        name: "IT Admin",
        desc: "Can view the admin console and manage machines and users. Cannot manage ACLs or network settings.",
      };
    case "auditor":
      return {
        name: "Auditor",
        desc: "Can view the admin console.",
      };
    case "member":
      return {
        name: "Member",
        desc: "Cannot view the admin console.",
      };
    default:
      return {
        name: "Unknown",
        desc: "Unknown",
      };
  }
}