fix: add error states to OrgResolver, DashboardPage, AdminTenantsPage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 19:51:28 +02:00
parent 798ec4850d
commit ce1655bba6
3 changed files with 45 additions and 12 deletions

View File

@@ -1,6 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useLogto } from '@logto/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 { useMe } from '../api/hooks';
import { useOrgStore } from './useOrganization'; import { useOrgStore } from './useOrganization';
import { fetchConfig } from '../config'; import { fetchConfig } from '../config';
@@ -11,7 +11,7 @@ import { fetchConfig } from '../config';
* Renders children once resolved. * Renders children once resolved.
*/ */
export function OrgResolver({ children }: { children: React.ReactNode }) { export function OrgResolver({ children }: { children: React.ReactNode }) {
const { data: me, isLoading, isError } = useMe(); const { data: me, isLoading, isError, refetch } = useMe();
const { getAccessToken } = useLogto(); const { getAccessToken } = useLogto();
const { getIdTokenClaims } = useLogto(); const { getIdTokenClaims } = useLogto();
const { setOrganizations, setCurrentOrg, setScopes, setUsername, currentOrgId } = useOrgStore(); const { setOrganizations, setCurrentOrg, setScopes, setUsername, currentOrgId } = useOrgStore();
@@ -86,7 +86,17 @@ export function OrgResolver({ children }: { children: React.ReactNode }) {
} }
if (isError) { 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}</>; return <>{children}</>;

View File

@@ -3,6 +3,7 @@ import {
Badge, Badge,
Card, Card,
DataTable, DataTable,
EmptyState,
Spinner, Spinner,
} from '@cameleer/design-system'; } from '@cameleer/design-system';
import type { Column } 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() { export function AdminTenantsPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { data: tenants, isLoading } = useAllTenants(); const { data: tenants, isLoading, isError } = useAllTenants();
const { setCurrentOrg } = useOrgStore(); const { setCurrentOrg } = useOrgStore();
if (isLoading) { 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) => { const handleRowClick = (tenant: TenantResponse) => {
// Find the matching org from the store and switch context // Find the matching org from the store and switch context
const orgs = useOrgStore.getState().organizations; const orgs = useOrgStore.getState().organizations;
@@ -65,11 +77,11 @@ export function AdminTenantsPage() {
</div> </div>
<Card title={`${tenants?.length ?? 0} Tenants`}> <Card title={`${tenants?.length ?? 0} Tenants`}>
<DataTable {(!tenants || tenants.length === 0) ? (
columns={columns} <EmptyState title="No tenants" description="No tenants have been created yet." />
data={tenants ?? []} ) : (
onRowClick={handleRowClick} <DataTable columns={columns} data={tenants} onRowClick={handleRowClick} />
/> )}
</Card> </Card>
</div> </div>
); );

View File

@@ -14,8 +14,8 @@ import { tierColor } from '../utils/tier';
export function DashboardPage() { export function DashboardPage() {
const { tenantId } = useAuth(); const { tenantId } = useAuth();
const { data: tenant, isLoading: tenantLoading } = useTenant(tenantId ?? ''); const { data: tenant, isLoading: tenantLoading, isError: tenantError } = useTenant(tenantId ?? '');
const { data: license, isLoading: licenseLoading } = useLicense(tenantId ?? ''); const { data: license, isLoading: licenseLoading, isError: licenseError } = useLicense(tenantId ?? '');
const isLoading = tenantLoading || licenseLoading; 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) { if (!tenantId) {
return ( return (
<EmptyState <EmptyState