-35
islands/MigrationProgress.tsx
-35
islands/MigrationProgress.tsx
···
4
4
MigrationError,
5
5
MigrationErrorType,
6
6
MigrationProgressProps,
7
-
MigrationStateInfo,
8
7
MigrationStep,
9
8
} from "../lib/client.ts";
10
-
import { getMigrationState } from "../lib/migration-state.ts";
11
-
12
9
/**
13
10
* The migration progress component.
14
11
* @param props - The migration progress props
···
17
14
*/
18
15
export default function MigrationProgress(props: MigrationProgressProps) {
19
16
const [token, setToken] = useState("");
20
-
const migrationState: MigrationStateInfo = getMigrationState();
21
17
const [showContinueAnyway, setShowContinueAnyway] = useState<
22
18
Record<number, boolean>
23
19
>({});
···
293
289
294
290
return (
295
291
<div class="space-y-8">
296
-
{/* Migration state alert */}
297
-
{migrationState && !migrationState.allowMigration && (
298
-
<div
299
-
class={`p-4 rounded-lg border ${
300
-
migrationState.state === "maintenance"
301
-
? "bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200"
302
-
: "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200"
303
-
}`}
304
-
>
305
-
<div class="flex items-center">
306
-
<div
307
-
class={`mr-3 ${
308
-
migrationState.state === "maintenance"
309
-
? "text-yellow-600 dark:text-yellow-400"
310
-
: "text-red-600 dark:text-red-400"
311
-
}`}
312
-
>
313
-
{migrationState.state === "maintenance" ? "⚠️" : "🚫"}
314
-
</div>
315
-
<div>
316
-
<h3 class="font-semibold mb-1">
317
-
{migrationState.state === "maintenance"
318
-
? "Maintenance Mode"
319
-
: "Service Unavailable"}
320
-
</h3>
321
-
<p class="text-sm">{migrationState.message}</p>
322
-
</div>
323
-
</div>
324
-
</div>
325
-
)}
326
-
327
292
<div class="space-y-4">
328
293
{steps.map((step, index) => (
329
294
<div key={step.name} class={getStepClasses(step.status)}>