@rebasepro/admin 0.2.3 → 0.2.5

package/src/components/admin/UsersView.tsx

@@ -1,687 +0,0 @@
-
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { User } from "@rebasepro/types";
-import { useSnackbarController, useAuthController, useTranslation } from "@rebasepro/core";
-import { useBreadcrumbsController } from "../../index";
-import {
-    Alert,
-    Button,
-    CenteredView,
-    CheckCircleIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    CircularProgress,
-    Container,
-    CopyIcon,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    iconSize,
-    KeyRoundIcon,
-    LoadingButton,
-    MailIcon,
-    MultiSelect,
-    MultiSelectItem,
-    PlusIcon,
-    SearchBar,
-    Select,
-    SelectItem,
-    Skeleton,
-    Table,
-    TableBody,
-    TableCell,
-    TableHeader,
-    TableRow,
-    TextField,
-    Tooltip,
-    Trash2Icon,
-    Typography
-} from "@rebasepro/ui";
-import { RoleChip } from "./RoleChip";
-import { UserManagementDelegate, Role, UserCreationResult } from "@rebasepro/types";
-import { ConfirmationDialog, BootstrapAdminBanner } from "@rebasepro/core";
-import { CreationResultDialog } from "./CreationResultDialog";
-
-
-const PAGE_SIZE = 25;
-
-// ============================================
-// UsersView Component
-// ============================================
-export function UsersView({ userManagement }: {
-    userManagement: UserManagementDelegate;
-}) {
-    const { roles, saveUser, createUser, deleteUser, resetPassword, loading: delegateLoading, bootstrapAdmin, usersError } = userManagement;
-    const snackbarController = useSnackbarController();
-    const { user: loggedInUser } = useAuthController();
-    const { t } = useTranslation();
-    const breadcrumbs = useBreadcrumbsController();
-
-    React.useEffect(() => {
-        breadcrumbs.set({
-            breadcrumbs: [{ title: t("users"),
-url: "/users" }]
-        });
-
-    }, []);
-
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [selectedUser, setSelectedUser] = useState<User | undefined>();
-    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
-    const [userToDelete, setUserToDelete] = useState<User | undefined>();
-    const [deleteInProgress, setDeleteInProgress] = useState(false);
-    const [formKey, setFormKey] = useState(0);
-    const [bootstrapping, setBootstrapping] = useState(false);
-
-    // Creation result state
-    const [creationResult, setCreationResult] = useState<UserCreationResult | null>(null);
-
-    // Reset password
-    const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
-    const [userToReset, setUserToReset] = useState<User | undefined>();
-    const [resetInProgress, setResetInProgress] = useState(false);
-
-    // Check if server-side search is available
-    const hasServerSearch = !!userManagement.searchUsers;
-
-    // ---- Server-side pagination state ----
-    const [searchQuery, setSearchQuery] = useState("");
-    const [roleFilter, setRoleFilter] = useState<string>("");
-    const [page, setPage] = useState(0);
-    const [paginatedUsers, setPaginatedUsers] = useState<User[]>([]);
-    const [totalUsers, setTotalUsers] = useState(0);
-    const [tableLoading, setTableLoading] = useState(hasServerSearch);
-
-    // Debounce timer ref for search
-    const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    // Fallback: use in-memory users if no searchUsers
-    const allUsers = userManagement.users;
-
-    /**
-     * Fetch a page of users from the server.
-     * Only shows the loading skeleton when we have no data yet (initial load).
-     * Subsequent re-fetches (pagination, search) update in-place without flashing.
-     */
-    const fetchPage = useCallback(async (pageNum: number, search: string, filterRole: string, forceLoading = false) => {
-        if (!userManagement.searchUsers) return;
-
-        // Only show skeleton on initial load or explicit requests (search/filter/page change).
-        // This avoids flashing skeletons when the effect re-fires from dep changes.
-        if (forceLoading) {
-            setTableLoading(true);
-        }
-        try {
-            const result = await userManagement.searchUsers({
-                search: search || undefined,
-                roleId: filterRole || undefined,
-                limit: PAGE_SIZE,
-                offset: pageNum * PAGE_SIZE,
-                orderBy: "createdAt",
-                orderDir: "desc"
-            });
-            setPaginatedUsers(result.users);
-            setTotalUsers(result.total);
-        } catch (error: unknown) {
-            console.error("Failed to fetch users:", error);
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : "Failed to load users" });
-        } finally {
-            setTableLoading(false);
-        }
-    }, [userManagement.searchUsers, snackbarController]);
-
-    // Stable ref for fetchPage so the initial-load effect doesn't re-fire
-    // every time fetchPage's reference changes (which happens on parent re-renders).
-    const fetchPageRef = useRef(fetchPage);
-    fetchPageRef.current = fetchPage;
-    const initialFetchDone = useRef(false);
-
-    // Load initial page when delegate finishes loading — runs exactly once.
-    useEffect(() => {
-        if (!delegateLoading && !usersError && hasServerSearch && !initialFetchDone.current) {
-            initialFetchDone.current = true;
-            fetchPageRef.current(0, "", roleFilter, true);
-        }
-    }, [delegateLoading, usersError, hasServerSearch, roleFilter]);
-
-    // Handle search changes (debounced)
-    const handleSearch = useCallback((value: string) => {
-        setSearchQuery(value);
-        setPage(0);
-
-        if (searchTimerRef.current) {
-            clearTimeout(searchTimerRef.current);
-        }
-
-        if (hasServerSearch) {
-            searchTimerRef.current = setTimeout(() => {
-                fetchPage(0, value, roleFilter, true);
-            }, 300);
-        }
-    }, [hasServerSearch, fetchPage, roleFilter]);
-
-    const handleRoleFilterChange = useCallback((newRole: string) => {
-        setRoleFilter(newRole);
-        setPage(0);
-        if (hasServerSearch) {
-            fetchPage(0, searchQuery, newRole, true);
-        }
-    }, [hasServerSearch, fetchPage, searchQuery]);
-
-    // Handle page change
-    const handlePageChange = useCallback((newPage: number) => {
-        setPage(newPage);
-        if (hasServerSearch) {
-            fetchPage(newPage, searchQuery, roleFilter, true);
-        }
-    }, [hasServerSearch, fetchPage, searchQuery, roleFilter]);
-
-    // Refresh current page (after create/update/delete)
-    const refreshCurrentPage = useCallback(() => {
-        if (hasServerSearch) {
-            fetchPage(page, searchQuery, roleFilter);
-        }
-    }, [hasServerSearch, fetchPage, page, searchQuery, roleFilter]);
-
-    // Determine which users to show
-    let displayUsers: User[];
-    let displayTotal: number;
-
-    if (hasServerSearch) {
-        displayUsers = paginatedUsers;
-        displayTotal = totalUsers;
-    } else {
-        // Fallback: local filtering for backward compat
-        const filtered = allUsers.filter(u => {
-            let matches = true;
-            if (searchQuery) {
-                const q = searchQuery.toLowerCase();
-                matches = !!(u.email?.toLowerCase().includes(q) || u.displayName?.toLowerCase().includes(q));
-            }
-            if (matches && roleFilter) {
-                matches = !!u.roles?.includes(roleFilter);
-            }
-            return matches;
-        });
-        displayTotal = filtered.length;
-        displayUsers = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
-    }
-
-    const totalPages = Math.max(1, Math.ceil(displayTotal / PAGE_SIZE));
-
-    // Check if any admin exists
-    const hasAdmin = allUsers.some(u => u.roles?.includes("admin"));
-
-    const handleBootstrap = async () => {
-        if (!bootstrapAdmin) return;
-        setBootstrapping(true);
-        try {
-            await bootstrapAdmin();
-            snackbarController.open({ type: "success",
-message: t("bootstrap_admin_success") });
-            window.location.reload();
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : t("failed_to_bootstrap_admin") });
-        } finally {
-            setBootstrapping(false);
-        }
-    };
-
-    const handleAddUser = () => {
-        setSelectedUser(undefined);
-        setFormKey(k => k + 1);
-        setDialogOpen(true);
-    };
-
-    const handleEditUser = (user: User) => {
-        setSelectedUser(user);
-        setDialogOpen(true);
-    };
-
-    const handleClose = () => {
-        setDialogOpen(false);
-        setSelectedUser(undefined);
-    };
-
-    const handleDelete = async () => {
-        if (!userToDelete || !deleteUser) return;
-        setDeleteInProgress(true);
-        try {
-            await deleteUser(userToDelete);
-            snackbarController.open({ type: "success",
-message: t("user_deleted_successfully") });
-            setDeleteConfirmOpen(false);
-            setUserToDelete(undefined);
-            refreshCurrentPage();
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : t("error_deleting_user") });
-        } finally {
-            setDeleteInProgress(false);
-        }
-    };
-
-    const handleResetPassword = async () => {
-        if (!userToReset || !resetPassword) return;
-        setResetInProgress(true);
-        try {
-            const result = await resetPassword(userToReset);
-            setResetConfirmOpen(false);
-            setUserToReset(undefined);
-            setCreationResult(result);
-            snackbarController.open({ type: "success",
-message: t("reset_password_success") });
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : t("error_resetting_password") });
-        } finally {
-            setResetInProgress(false);
-        }
-    };
-
-    return (
-        <Container className="w-full flex flex-col py-4 gap-4" maxWidth={"6xl"}>
-            <BootstrapAdminBanner className="mb-4" />
-
-            <div className="flex items-center mt-12 mb-4 gap-4">
-                <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
-                    {t("users")}
-                </Typography>
-                {roles && roles.length > 0 && (
-                    <Select
-                        value={roleFilter || "__all__"}
-                        onValueChange={(v) => handleRoleFilterChange(v === "__all__" ? "" : v)}
-                        placeholder={t("all_roles") || "All Roles"}
-                        size="small"
-                        className="w-48"
-                    >
-                        <SelectItem value="__all__">{t("all_roles") || "All Roles"}</SelectItem>
-                        {roles.map(role => (
-                            <SelectItem key={role.id} value={role.id}>{role.name}</SelectItem>
-                        ))}
-                    </Select>
-                )}
-                <SearchBar
-                    placeholder={t("search_users")}
-                    onTextSearch={(v) => handleSearch(v || "")}
-                    size="small"
-                    expandable
-                />
-                <Button startIcon={<PlusIcon/>} onClick={handleAddUser} disabled={!saveUser}>
-                    {t("add_user")}
-                </Button>
-            </div>
-
-            <div className="overflow-auto">
-                <Table className="w-full">
-                    <TableHeader>
-                        <TableCell header className="w-48">{t("id") || "ID"}</TableCell>
-                        <TableCell header>{t("email")}</TableCell>
-                        <TableCell header>{t("name")}</TableCell>
-                        <TableCell header>{t("roles")}</TableCell>
-                        <TableCell header className="whitespace-nowrap">{t("created")}</TableCell>
-                        <TableCell header className="w-24 text-right">{t("actions")}</TableCell>
-                    </TableHeader>
-                    <TableBody>
-                        {(tableLoading || delegateLoading) ? (
-                            [
-                                { email: "w-48",
-name: "w-32",
-roles: ["w-16", "w-20"] },
-                                { email: "w-32",
-name: "w-24",
-roles: ["w-24"] },
-                                { email: "w-40",
-name: "w-36",
-roles: ["w-16", "w-16"] }
-                            ].map((row, i) => (
-                                <TableRow key={`skeleton-${i}`}>
-                                    <TableCell className="font-mono text-xs"><Skeleton className="h-3 w-40"/></TableCell>
-                                    <TableCell><Skeleton className={`h-4 ${row.email}`}/></TableCell>
-                                    <TableCell className="font-medium"><Skeleton className={`h-4 ${row.name}`}/></TableCell>
-                                    <TableCell>
-                                        <div className="flex flex-wrap gap-2">
-                                            {row.roles.map((w, j) => (
-                                                <Skeleton key={j} className={`h-6 ${w} rounded-full`}/>
-                                            ))}
-                                        </div>
-                                    </TableCell>
-                                    <TableCell className="whitespace-nowrap text-sm">
-                                        <Skeleton className="h-4 w-20"/>
-                                    </TableCell>
-                                    <TableCell className="text-right whitespace-nowrap">
-                                        <div className="flex justify-end items-center gap-1">
-                                            <Skeleton className="h-7 w-7 rounded-md"/>
-                                            <Skeleton className="h-7 w-7 rounded-md"/>
-                                        </div>
-                                    </TableCell>
-                                </TableRow>
-                            ))
-                        ) : (
-                            displayUsers.map(user => (
-                            <TableRow key={user.uid} onClick={() => saveUser && handleEditUser(user)}>
-                                <TableCell className="font-mono text-xs">{user.uid}</TableCell>
-                                <TableCell>{user.email}</TableCell>
-                                <TableCell className="font-medium">{user.displayName}</TableCell>
-                                <TableCell>
-                                    <div className="flex flex-wrap gap-2">
-                                        {user.roles?.map((roleId: string) => {
-                                            const role = roles?.find(r => r.id === roleId);
-                                            return role ? <RoleChip key={roleId} role={role}/> : <span key={roleId}>{roleId}</span>;
-                                        })}
-                                    </div>
-                                </TableCell>
-                                <TableCell className="whitespace-nowrap text-sm text-surface-accent-600 dark:text-surface-accent-400">
-                                    {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "-"}
-                                </TableCell>
-                                <TableCell className="text-right whitespace-nowrap">
-                                    <div className="flex justify-end items-center gap-1">
-                                        {resetPassword && (
-                                            <Tooltip asChild title={t("reset_password")}>
-                                                <IconButton
-                                                    size="small"
-                                                    onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        setUserToReset(user);
-                                                        setResetConfirmOpen(true);
-                                                    }}>
-                                                    <KeyRoundIcon size={iconSize.small}/>
-                                                </IconButton>
-                                            </Tooltip>
-                                        )}
-                                        {deleteUser && (
-                                            <Tooltip asChild title={t("delete_this_user")}>
-                                                <IconButton
-                                                    size="small"
-                                                    onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        setUserToDelete(user);
-                                                        setDeleteConfirmOpen(true);
-                                                    }}>
-                                                    <Trash2Icon size={iconSize.small}/>
-                                                </IconButton>
-                                            </Tooltip>
-                                        )}
-                                    </div>
-                                </TableCell>
-                            </TableRow>
-                        )))}
-
-                        {displayUsers.length === 0 && !tableLoading && !delegateLoading && (
-                            <TableRow>
-                                <TableCell colspan={6}>
-                                    <CenteredView className="flex flex-col gap-4 my-8 items-center">
-                                        <Typography variant="label">
-                                            {usersError
-                                                ? t("no_permission_to_view_users")
-                                                : searchQuery ? t("no_users_found") : t("no_users_yet")}
-                                        </Typography>
-                                        {usersError && (
-                                            <Typography variant="caption" color="secondary">
-                                                {t("no_permission_description")}
-                                            </Typography>
-                                        )}
-                                    </CenteredView>
-                                </TableCell>
-                            </TableRow>
-                        )}
-                    </TableBody>
-                </Table>
-            </div>
-
-            {/* Pagination */}
-            {displayTotal > PAGE_SIZE && (
-                <div className="flex items-center justify-between px-2 py-3">
-                    <Typography variant="body2" className="text-surface-accent-500 dark:text-surface-accent-400">
-                        {`${page * PAGE_SIZE + 1}–${Math.min((page + 1) * PAGE_SIZE, displayTotal)} / ${displayTotal}`}
-                    </Typography>
-                    <div className="flex items-center gap-1">
-                        <IconButton
-                            size="small"
-                            disabled={page === 0}
-                            onClick={() => handlePageChange(page - 1)}>
-                            <ChevronLeftIcon size={iconSize.smallest}/>
-                        </IconButton>
-                        <Typography variant="body2" className="px-3 text-surface-accent-600 dark:text-surface-accent-300">
-                            {page + 1} / {totalPages}
-                        </Typography>
-                        <IconButton
-                            size="small"
-                            disabled={page >= totalPages - 1}
-                            onClick={() => handlePageChange(page + 1)}>
-                            <ChevronRightIcon size={iconSize.smallest}/>
-                        </IconButton>
-                    </div>
-                </div>
-            )}
-
-            {/* User Edit Dialog */}
-            {saveUser && (
-                <UserDetailsForm
-                    key={selectedUser?.uid ?? `new-${formKey}`}
-                    open={dialogOpen}
-                    user={selectedUser}
-                    roles={roles}
-                    saveUser={saveUser}
-                    createUser={createUser}
-                    handleClose={handleClose}
-                    onCreationResult={setCreationResult}
-                    onSaved={refreshCurrentPage}
-                />
-            )}
-
-            {/* Creation Result Dialog */}
-            {creationResult && (
-                <CreationResultDialog
-                    result={creationResult}
-                    onClose={() => setCreationResult(null)}
-                />
-            )}
-
-            {/* Delete Confirmation */}
-            <ConfirmationDialog
-                open={deleteConfirmOpen}
-                loading={deleteInProgress}
-                onAccept={handleDelete}
-                onCancel={() => { setDeleteConfirmOpen(false); setUserToDelete(undefined); }}
-                title={<>{t("delete_confirmation_title")}</>}
-                body={<>{t("delete_user_confirmation")}</>}
-            />
-
-            {/* Reset Password Confirmation */}
-            <ConfirmationDialog
-                open={resetConfirmOpen}
-                loading={resetInProgress}
-                onAccept={handleResetPassword}
-                onCancel={() => { setResetConfirmOpen(false); setUserToReset(undefined); }}
-                title={<>{t("reset_password")}</>}
-                body={<>{t("reset_password_confirmation")}</>}
-            />
-        </Container>
-    );
-}
-
-// ============================================
-// UserDetailsForm Component
-// ============================================
-function UserDetailsForm({
-    open,
-    user: userProp,
-    roles,
-    saveUser,
-    createUser,
-    handleClose,
-    onCreationResult,
-    onSaved
-}: {
-    open: boolean;
-    user?: User;
-    roles?: Role[];
-    saveUser: (user: User) => Promise<User>;
-    createUser?: (user: User) => Promise<UserCreationResult>;
-    handleClose: () => void;
-    onCreationResult?: (result: UserCreationResult) => void;
-    onSaved?: () => void;
-}) {
-    const snackbarController = useSnackbarController();
-    const { t } = useTranslation();
-    const isNewUser = !userProp;
-
-    const [displayName, setDisplayName] = useState(userProp?.displayName || "");
-    const [email, setEmail] = useState(userProp?.email || "");
-    const [selectedRoleIds, setSelectedRoleIds] = useState<string[]>(
-        userProp?.roles || []
-    );
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [errors, setErrors] = useState<{ displayName?: string; email?: string; roles?: string }>({});
-    const [submitCount, setSubmitCount] = useState(0);
-
-    const validate = () => {
-        const newErrors: typeof errors = {};
-        if (!displayName) newErrors.displayName = "Required";
-        if (!email) newErrors.email = "Required";
-        else if (!/\S+@\S+\.\S+/.test(email)) newErrors.email = "Invalid email";
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setSubmitCount(c => c + 1);
-
-        if (!validate()) return;
-
-        setIsSubmitting(true);
-        try {
-            const userRoles = selectedRoleIds;
-            const userToSave: User = {
-                uid: userProp?.uid || crypto.randomUUID(),
-                email,
-                displayName: displayName || null,
-                photoURL: userProp?.photoURL || null,
-                providerId: userProp?.providerId || "custom",
-                isAnonymous: userProp?.isAnonymous || false,
-                roles: userRoles
-            };
-
-            if (isNewUser && createUser && onCreationResult) {
-                // Use createUser for new users to get invitation/password info
-                const result = await createUser(userToSave);
-                handleClose();
-                onCreationResult(result);
-            } else {
-                await saveUser(userToSave);
-                handleClose();
-            }
-            onSaved?.();
-        } catch (error: unknown) {
-            snackbarController.open({ type: "error",
-message: error instanceof Error ? error.message : "Failed to save user" });
-        } finally {
-            setIsSubmitting(false);
-        }
-    };
-
-    const dirty = isNewUser ||
-        displayName !== (userProp?.displayName || "") ||
-        email !== (userProp?.email || "") ||
-        (() => {
-            const prev = userProp?.roles || [];
-            if (selectedRoleIds.length !== prev.length) return true;
-            const set = new Set(prev);
-            return selectedRoleIds.some(id => !set.has(id));
-        })();
-
-    return (
-        <Dialog open={open} onOpenChange={(open) => !open ? handleClose() : undefined} maxWidth="4xl">
-            <form onSubmit={handleSubmit} autoComplete="off" noValidate
-                style={{ display: "flex",
-flexDirection: "column",
-position: "relative",
-height: "100%" }}>
-
-                <DialogTitle variant="h4" gutterBottom={false}>
-                    {t("user")}
-                </DialogTitle>
-
-                <DialogContent className="h-full grow">
-                    <div className="grid grid-cols-12 gap-4">
-                        {!isNewUser && (
-                            <div className="col-span-12">
-                                <TextField
-                                    name="uid"
-                                    value={userProp?.uid || ""}
-                                    label={t("id") || "ID"}
-                                    disabled
-                                />
-                            </div>
-                        )}
-                        <div className="col-span-12">
-                            <TextField
-                                name="displayName"
-                                required
-                                error={submitCount > 0 && Boolean(errors.displayName)}
-                                value={displayName}
-                                onChange={(e) => setDisplayName(e.target.value)}
-                                label={t("name")}
-                            />
-                            {submitCount > 0 && errors.displayName && (
-                                <Typography variant="caption" color="error">{errors.displayName}</Typography>
-                            )}
-                        </div>
-
-                        <div className="col-span-12">
-                            <TextField
-                                required
-                                error={submitCount > 0 && Boolean(errors.email)}
-                                name="email"
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                                label={t("email")}
-                                disabled={!isNewUser}
-                            />
-                            {submitCount > 0 && errors.email && (
-                                <Typography variant="caption" color="error">{errors.email}</Typography>
-                            )}
-                        </div>
-
-                        {roles && roles.length > 0 && (
-                            <div className="col-span-12">
-                                <MultiSelect
-                                    className="w-full"
-                                    label={t("roles")}
-                                    value={selectedRoleIds}
-                                    onValueChange={(value: string[]) => setSelectedRoleIds(value)}
-                                >
-                                    {roles.map(role => (
-                                        <MultiSelectItem key={role.id} value={role.id}>
-                                            <RoleChip role={role}/>
-                                        </MultiSelectItem>
-                                    ))}
-                                </MultiSelect>
-                            </div>
-                        )}
-                    </div>
-                </DialogContent>
-
-                <DialogActions>
-                    <Button variant="text" onClick={handleClose}>
-                        {t("cancel")}
-                    </Button>
-                    <LoadingButton
-                        variant="filled"
-                        type="submit"
-                        disabled={!dirty}
-                        loading={isSubmitting}
-                    >
-                        {isNewUser ? t("create_user") : t("update")}
-                    </LoadingButton>
-                </DialogActions>
-            </form>
-        </Dialog>
-    );
-}