···

       
4
       
4
       
 
       
  MigrationError,

     

       
5
       
5
       
 
       
  MigrationErrorType,

     

       
6
       
6
       
 
       
  MigrationProgressProps,

     

       
7
       
7
       
-
       
  MigrationStateInfo,

     

       
8
       
7
       
 
       
  MigrationStep,

     

       
9
       
8
       
 
       
} from "../lib/client.ts";

     

       
10
       
10
       
-
       
import { getMigrationState } from "../lib/migration-state.ts";

     

       
11
       
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
       
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
       
296
       
-
       
      {/* Migration state alert */}

     

       
297
       
297
       
-
       
      {migrationState && !migrationState.allowMigration && (

     

       
298
       
298
       
-
       
        <div

     

       
299
       
299
       
-
       
          class={`p-4 rounded-lg border ${

     

       
300
       
300
       
-
       
            migrationState.state === "maintenance"

     

       
301
       
301
       
-
       
              ? "bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200"

     

       
302
       
302
       
-
       
              : "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200"

     

       
303
       
303
       
-
       
          }`}

     

       
304
       
304
       
-
       
        >

     

       
305
       
305
       
-
       
          <div class="flex items-center">

     

       
306
       
306
       
-
       
            <div

     

       
307
       
307
       
-
       
              class={`mr-3 ${

     

       
308
       
308
       
-
       
                migrationState.state === "maintenance"

     

       
309
       
309
       
-
       
                  ? "text-yellow-600 dark:text-yellow-400"

     

       
310
       
310
       
-
       
                  : "text-red-600 dark:text-red-400"

     

       
311
       
311
       
-
       
              }`}

     

       
312
       
312
       
-
       
            >

     

       
313
       
313
       
-
       
              {migrationState.state === "maintenance" ? "⚠️" : "🚫"}

     

       
314
       
314
       
-
       
            </div>

     

       
315
       
315
       
-
       
            <div>

     

       
316
       
316
       
-
       
              <h3 class="font-semibold mb-1">

     

       
317
       
317
       
-
       
                {migrationState.state === "maintenance"

     

       
318
       
318
       
-
       
                  ? "Maintenance Mode"

     

       
319
       
319
       
-
       
                  : "Service Unavailable"}

     

       
320
       
320
       
-
       
              </h3>

     

       
321
       
321
       
-
       
              <p class="text-sm">{migrationState.message}</p>

     

       
322
       
322
       
-
       
            </div>

     

       
323
       
323
       
-
       
          </div>

     

       
324
       
324
       
-
       
        </div>

     

       
325
       
325
       
-
       
      )}

     

       
326
       
326
       
-
       


     

       
327
       
292
       
 
       
      <div class="space-y-4">

     

       
328
       
293
       
 
       
        {steps.map((step, index) => (

     

       
329
       
294
       
 
       
          <div key={step.name} class={getStepClasses(step.status)}>