fix: add error states to OrgResolver, DashboardPage, AdminTenantsPage
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useLogto } from '@logto/react';
|
||||
import { Spinner } from '@cameleer/design-system';
|
||||
import { Button, EmptyState, Spinner } from '@cameleer/design-system';
|
||||
import { useMe } from '../api/hooks';
|
||||
import { useOrgStore } from './useOrganization';
|
||||
import { fetchConfig } from '../config';
|
||||
@@ -11,7 +11,7 @@ import { fetchConfig } from '../config';
|
||||
* Renders children once resolved.
|
||||
*/
|
||||
export function OrgResolver({ children }: { children: React.ReactNode }) {
|
||||
const { data: me, isLoading, isError } = useMe();
|
||||
const { data: me, isLoading, isError, refetch } = useMe();
|
||||
const { getAccessToken } = useLogto();
|
||||
const { getIdTokenClaims } = useLogto();
|
||||
const { setOrganizations, setCurrentOrg, setScopes, setUsername, currentOrgId } = useOrgStore();
|
||||
@@ -86,7 +86,17 @@ export function OrgResolver({ children }: { children: React.ReactNode }) {
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return null;
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '50vh', gap: '1rem' }}>
|
||||
<EmptyState
|
||||
title="Unable to load account"
|
||||
description="Failed to retrieve your organization. Please try again or contact support."
|
||||
/>
|
||||
<Button variant="secondary" size="sm" onClick={() => refetch()}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
Badge,
|
||||
Card,
|
||||
DataTable,
|
||||
EmptyState,
|
||||
Spinner,
|
||||
} from '@cameleer/design-system';
|
||||
import type { Column } from '@cameleer/design-system';
|
||||
@@ -29,12 +30,12 @@ const columns: Column<TenantResponse>[] = [
|
||||
/>
|
||||
),
|
||||
},
|
||||
{ key: 'createdAt', header: 'Created' },
|
||||
{ key: 'createdAt', header: 'Created', render: (_: unknown, row: TenantResponse) => new Date(row.createdAt).toLocaleDateString() },
|
||||
];
|
||||
|
||||
export function AdminTenantsPage() {
|
||||
const navigate = useNavigate();
|
||||
const { data: tenants, isLoading } = useAllTenants();
|
||||
const { data: tenants, isLoading, isError } = useAllTenants();
|
||||
const { setCurrentOrg } = useOrgStore();
|
||||
|
||||
if (isLoading) {
|
||||
@@ -45,6 +46,17 @@ export function AdminTenantsPage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<EmptyState
|
||||
title="Unable to load tenants"
|
||||
description="You may not have admin permissions, or the server is unavailable."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const handleRowClick = (tenant: TenantResponse) => {
|
||||
// Find the matching org from the store and switch context
|
||||
const orgs = useOrgStore.getState().organizations;
|
||||
@@ -65,11 +77,11 @@ export function AdminTenantsPage() {
|
||||
</div>
|
||||
|
||||
<Card title={`${tenants?.length ?? 0} Tenants`}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={tenants ?? []}
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
{(!tenants || tenants.length === 0) ? (
|
||||
<EmptyState title="No tenants" description="No tenants have been created yet." />
|
||||
) : (
|
||||
<DataTable columns={columns} data={tenants} onRowClick={handleRowClick} />
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -14,8 +14,8 @@ import { tierColor } from '../utils/tier';
|
||||
export function DashboardPage() {
|
||||
const { tenantId } = useAuth();
|
||||
|
||||
const { data: tenant, isLoading: tenantLoading } = useTenant(tenantId ?? '');
|
||||
const { data: license, isLoading: licenseLoading } = useLicense(tenantId ?? '');
|
||||
const { data: tenant, isLoading: tenantLoading, isError: tenantError } = useTenant(tenantId ?? '');
|
||||
const { data: license, isLoading: licenseLoading, isError: licenseError } = useLicense(tenantId ?? '');
|
||||
|
||||
const isLoading = tenantLoading || licenseLoading;
|
||||
|
||||
@@ -47,6 +47,17 @@ export function DashboardPage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (tenantError || licenseError) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<EmptyState
|
||||
title="Unable to load dashboard"
|
||||
description="Failed to retrieve tenant information. Please try again later."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!tenantId) {
|
||||
return (
|
||||
<EmptyState
|
||||
|
||||
Reference in New Issue
Block a user