Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
3.1 kB · 99 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100import type { Installation } from "../installation-metadata.ts";
const stages = [ ["preparing", "Preparing your account"], ["deploying", "Deploying Flarebot"], ["provisioning", "Provisioning your Sandbox"], ["verifying", "Verifying installation"],] as const;
export function InstallationProgress({ installation, updating = false,}: { installation: Pick<Installation, "status" | "progress"> | null; updating?: boolean;}) { const ready = installation?.status === "ready"; const failed = installation?.status === "failed"; const stage = ready ? stages.length : stages.findIndex(([value]) => value === installation?.progress); const completed = Math.max(0, stage) + 1; const total = stages.length + 1; const label = updating ? "Update progress" : "Installation progress"; const summary = ready ? updating ? "Update complete" : "Installation complete" : failed ? "Needs attention" : stage >= 0 ? stages[stage][1] : installation?.status === "reserved" ? "Ready to install" : updating ? "Preparing update…" : "Preparing installation…";
return ( <div className="installation-progress" data-status={installation?.status}> <div className="progress-heading" role="status"> <span className="progress-label">{summary}</span> {installation && ( <span> {completed} of {total} steps complete </span> )} </div> <progress className="installation-progress-bar" aria-label={label} aria-valuetext={ installation ? `${completed} of ${total} steps complete. ${summary}` : summary } max={total} value={installation ? completed : undefined} /> {installation && ( <details className="progress-details" open={!ready}> <summary>View {updating ? "update" : "installation"} steps</summary> <ol className="progress" aria-label={`${label} steps`}> <li data-state="complete"> <span className="step-state">Complete</span> <span>Cloudflare account connected</span> </li> {stages.map(([value, name], index) => ( <li key={value} data-state={ index < stage ? "complete" : index === stage ? failed ? "stopped" : "active" : "waiting" } aria-current={stage === index ? "step" : undefined} > <span className="step-state"> {index < stage ? "Complete" : index === stage ? failed ? "Stopped" : "In progress" : "Waiting"} </span> <span>{name}</span> </li> ))} </ol> </details> )} </div> );}