Tyler
1db6b8841c
Quality-fix iteration on 078c9ad. Resolves the 4 Important issues
flagged in the code review while preserving everything that's working.
Issue 1 — ProviderDrawer silently swallowed error states (infinite
skeleton on any failure). Now mirrors ClaimDrawer/RemitDrawer:
- Destructure { data, isLoading, isError, error, refetch }
- Compute errorKind = ApiError(404) → not_found, else → network
- New ProviderDrawerError.tsx renders the right copy + retry/close
- Body branches on errorKind → loading → data
Issue 2 — useProviderDetail did not match the useClaimDetail contract:
- 404 retry guard (no retries on 404, <=3 on everything else)
- Explicit typed return shape { data, isLoading, isError, error,
refetch }
- npi === null short-circuit after the useQuery call
Issue 3 — Provider drilldown was non-functional in demo mode. Added
the useSyncExternalStore fallback to useAppStore.providers (same
pattern as useProviders), gated by api.isConfigured. Unknown NPI in
demo mode surfaces via the error branch instead of an infinite
skeleton.
Issue 4 — Test was shape-only (1 case). Rewrote with vi.hoisted +
vi.fn() hook mock and 7 cases covering null/loading/404/network/
close/success/hook-call-shape.
Issue 5 — Replaced h-[calc(100%-64px)] with a flex layout
(flex h-full flex-col on DialogContent, flex h-full flex-col
overflow-y-auto on inner wrappers). Mirrors RemitDrawer's pattern;
no more coupling to DrillDrawerHeader's padding/font sizes.
Issue 7 — Removed the dead npi === null ? null : (...) wrapper
inside DialogContent; Dialog open={npi !== null} already gates it.
Issue 8 — Trailing newlines added across all touched + created files.
Self-review: tsc clean on changed files; drawer test suite 211/211
passing; full test suite 369/372 (3 pre-existing Inbox/Reconciliation
failures unchanged). ProviderDrawer now 7/7.
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { AlertCircle, WifiOff } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type ProviderDrawerErrorProps = {
|
|
kind: "not_found" | "network";
|
|
onRetry?: () => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const COPY = {
|
|
not_found: {
|
|
eyebrow: "NOT FOUND",
|
|
message: "This provider doesn't exist or has been removed.",
|
|
},
|
|
network: {
|
|
eyebrow: "CONNECTION",
|
|
message: "Couldn't reach the server. Check your connection and try again.",
|
|
},
|
|
} as const;
|
|
|
|
/**
|
|
* Error state for the provider drill-down drawer (SP21 Task 2.2).
|
|
*
|
|
* Two shapes — `not_found` (the NPI in the URL doesn't resolve on the
|
|
* server, e.g. a stale deep link) and `network` (the request failed).
|
|
* The not_found variant has no retry affordance (retrying won't help),
|
|
* the network variant does when `onRetry` is supplied.
|
|
*
|
|
* Visual twin of `RemitDrawerError` / `ClaimDrawerError` so the drawer
|
|
* family feels like one component family — same icon size, same eyebrow
|
|
* color, same button spacing.
|
|
*/
|
|
export function ProviderDrawerError({
|
|
kind,
|
|
onRetry,
|
|
onClose,
|
|
}: ProviderDrawerErrorProps) {
|
|
const { eyebrow, message } = COPY[kind];
|
|
const Icon = kind === "network" ? WifiOff : AlertCircle;
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col items-start gap-4 p-6 bg-[color:var(--m-surface)] text-[color:var(--m-ink-primary)]"
|
|
role="alert"
|
|
data-testid={`provider-drawer-error-${kind}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Icon
|
|
className="h-5 w-5 text-[color:var(--m-error)]"
|
|
strokeWidth={1.75}
|
|
aria-hidden
|
|
/>
|
|
<span className="eyebrow text-[color:var(--m-error)]">
|
|
{eyebrow}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-[color:var(--m-ink-secondary)] max-w-sm">{message}</p>
|
|
<div className="flex items-center gap-2">
|
|
{kind === "network" && onRetry ? (
|
|
<Button variant="outline" size="sm" onClick={onRetry} data-testid="error-retry">
|
|
Retry
|
|
</Button>
|
|
) : null}
|
|
<Button variant="ghost" size="sm" onClick={onClose} data-testid="error-close">
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|