/packages/react_ui/src/pages/users/page.tsx at 91f229472942a85c0cbd8464162665e40339b088

// SPDX-FileCopyrightText: 2025 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import "../../polyfill.ts";

import { createClient } from "@connectrpc/connect";
import {
	Badge,
	Button,
	Container,
	DropdownMenu,
	Flex,
	Separator,
	Spinner,
	Text,
} from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
import { type User } from "@yamori/proto/yamori/workspace/v2/user_pb.js";
import { WorkspaceService } from "@yamori/proto/yamori/workspace/v2/workspace_service_pb.js";
import { type FC, Fragment, useState } from "react";

import * as Empty from "../../components/Empty.ts";
import * as HelpDialog from "../../components/HelpDialog.ts";
import { ManagedErrorCallout } from "../../components/ErrorCallout.ts";
import { useConnectTransport } from "../../contexts/ConnectTransport.tsx";
import { IllegalMessageError } from "../../errors/IllegalMessageError.ts";

import { LoggedInLayout } from "../LoggedInLayout.tsx";

import * as DeleteDialog from "./DeleteDialog.tsx";

export const Title: FC = () => "ユーザ一覧";

export function hasAccess(loginUser: User): boolean {
	return !!loginUser.permissions?.canReadOtherUserProfile;
}

export const NoAccess: FC = () => {
	return (
		<Empty.Root>
			<Empty.Title>閲覧権限がありません</Empty.Title>
			<Empty.Description>
				他のユーザの閲覧権限がないためページを表示できません。
			</Empty.Description>
		</Empty.Root>
	);
};

interface BodyProps {
	loginUser: User;
}

export const Body: FC<BodyProps> = ({ loginUser }) => {
	const transport = useConnectTransport();
	const client = createClient(WorkspaceService, transport);

	const [isDeleting, setIsDeleting] = useState(false);

	const users = useQuery({
		queryKey: [
			WorkspaceService.typeName,
			WorkspaceService.method.get.name,
			import.meta.url,
		],
		async queryFn() {
			const resp = await client.get({});
			if (resp.result.case === "ok") {
				return resp.result.value.users;
			}

			if (typeof resp.result.case === "string") {
				throw resp.result.value;
			}

			throw new IllegalMessageError(resp);
		},
	});

	if (!users.data) {
		if (users.error) {
			return (
				<Empty.Root>
					<Empty.Title>ユーザ一覧を読み込めませんでした</Empty.Title>
					<ManagedErrorCallout
						error={users.error}
						title="ユーザ一覧を取得中にエラーが発生しました"
					/>
					<Empty.Actions>
						<Button loading={users.isFetching} onClick={() => void users.refetch()}>
							再取得
						</Button>
					</Empty.Actions>
				</Empty.Root>
			);
		}

		if (users.isFetching) {
			return (
				<Flex mt="5" justify="center" align="center" gap="2">
					<Spinner />
					<Text size="2" color="gray">
						一覧を取得中...
					</Text>
				</Flex>
			);
		}

		return (
			<Empty.Root>
				<Empty.Title>ユーザが存在しません</Empty.Title>
				<Empty.Description>
					ユーザ一覧のデータが空です。 システム不整合のため管理者に連絡してください。
				</Empty.Description>
			</Empty.Root>
		);
	}

	return (
		<Flex direction="column" mt="5" gap="5">
			{users.error && (
				<ManagedErrorCallout
					severity="warning"
					title="一覧の更新取得に失敗しました"
					error={users.error}
					actions={
						<Button
							size="1"
							loading={users.isFetching}
							onClick={() => void users.refetch()}
						>
							再試行
						</Button>
					}
				/>
			)}
			<Flex direction="column" gap="4" role="list">
				{users.data.map((user, i) => {
					const isLoginUser = loginUser.id?.value === user.id?.value;

					const deletable =
						!isLoginUser &&
						(user.isAdmin
							? loginUser.isAdmin
							: !!loginUser.permissions?.canDeleteRegularUser);

					return (
						<Fragment key={user.id?.value}>
							{i > 0 && <Separator size="4" />}
							<DeleteDialog.Root>
								<DropdownMenu.Root>
									<Flex gap="2" align="center" justify="between" role="listitem">
										<Flex direction="column" gap="1">
											<Text weight="bold">{user.displayName}</Text>
											<Flex
												gap="1"
												align="center"
												wrap="wrap"
												justify="start"
												role="list"
											>
												{user.isAdmin && <Badge color="red">管理者</Badge>}
												{isLoginUser && <Badge color="blue">ログイン中</Badge>}
											</Flex>
										</Flex>
										<DropdownMenu.Trigger disabled={users.isFetching}>
											<Button variant="soft">
												操作
												<DropdownMenu.TriggerIcon />
											</Button>
										</DropdownMenu.Trigger>
									</Flex>
									<DropdownMenu.Content>
										<DeleteDialog.Trigger>
											<DropdownMenu.Item
												color="red"
												disabled={!deletable || users.isFetching || isDeleting}
											>
												削除
											</DropdownMenu.Item>
										</DeleteDialog.Trigger>
									</DropdownMenu.Content>
								</DropdownMenu.Root>
								<DeleteDialog.Content
									user={user}
									onDeleteStart={() => void setIsDeleting(true)}
									onDeleted={() => {
										setIsDeleting(false);
										users.refetch();
									}}
									onDeleteError={() => void setIsDeleting(false)}
								/>
							</DeleteDialog.Root>
						</Fragment>
					);
				})}
			</Flex>
		</Flex>
	);
};

export interface PageProps {
	loginUser: User;
}

export const Page: FC<PageProps> = ({ loginUser }) => {
	return (
		<HelpDialog.Root>
			<LoggedInLayout
				title={
					<Flex as="span" align="center" gap="2">
						<Title />
						<HelpDialog.Trigger>このページの説明</HelpDialog.Trigger>
					</Flex>
				}
				user={loginUser}
			>
				<Container p="2" size="2">
					{hasAccess(loginUser) ? <Body loginUser={loginUser} /> : <NoAccess />}
				</Container>
			</LoggedInLayout>
			<HelpDialog.Content>
				<HelpDialog.Title>
					<Title />
				</HelpDialog.Title>

				<HelpDialog.Description>
					システムに登録されているユーザの一覧です。
				</HelpDialog.Description>

				<HelpDialog.Paragraph>
					システムに登録されているすべてのユーザが、ログインの可能・不可能に関わらず表示されます。
					他のユーザの閲覧権限がない場合は利用できません。
				</HelpDialog.Paragraph>
			</HelpDialog.Content>
		</HelpDialog.Root>
	);
};

export function createHref(): string {
	return "/users";
}

export const pattern = new URLPattern({
	pathname: "/users",
});