Migrate the migration flow to Pink2

src/lib/helpers/regions.ts

@@ -0,0 +1,27 @@
+import { getFlagUrl } from '$lib/helpers/flag';
+import type { Models } from '@appwrite.io/console';
+
+type RegionOption = {
+    label: string;
+    value: string;
+    disabled: boolean;
+    leadingHtml: string;
+};
+
+export function filterRegions(regions: Models.ConsoleRegion[]): RegionOption[] {
+    if (!regions.length) return [];
+
+    return regions
+        .filter((region) => region.$id !== 'default')
+        .sort((a, b) => {
+            if (a.disabled && !b.disabled) return 1;
+            if (!a.disabled && b.disabled) return -1;
+            return a.name.localeCompare(b.name);
+        })
+        .map((region) => ({
+            label: region.name,
+            value: region.$id,
+            disabled: region.disabled || !region.available,
+            leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`
+        }));
+}

src/lib/layout/createProject.svelte

@@ -5,6 +5,7 @@
     import { getFlagUrl } from '$lib/helpers/flag';
     import { isCloud } from '$lib/system.js';
     import type { Models } from '@appwrite.io/console';
+    import { filterRegions } from '$lib/helpers/regions';
 
     export let projectName: string;
     export let id: string;
@@ -13,25 +14,6 @@
     export let showTitle = true;
 
     let showCustomId = false;
-
-    function getRegions() {
-        return regions
-            .filter((region) => region.$id !== 'default')
-            .sort((regionA, regionB) => {
-                if (regionA.disabled && !regionB.disabled) {
-                    return 1;
-                }
-                return regionA.name > regionB.name ? 1 : -1;
-            })
-            .map((region) => {
-                return {
-                    label: region.name,
-                    value: region.$id,
-                    leadingHtml: `<img src='${getFlagUrl(region.flag)}' alt='Region flag'/>`,
-                    disabled: region.disabled || !region.available
-                };
-            });
-    }
 </script>
 
 <svelte:head>
@@ -69,7 +51,7 @@
                         <Input.Select
                             bind:value={region}
                             placeholder="Select a region"
-                            options={getRegions()}
+                            options={filterRegions(regions)}
                             label="Region" />
                         <Typography.Text>Region cannot be changed after creation</Typography.Text>
                     </Layout.Stack>

src/routes/(console)/(migration-wizard)/index.ts

@@ -3,6 +3,7 @@ import { wizard } from '$lib/stores/wizard';
 import { requestedMigration } from '$routes/store';
 import { get, writable } from 'svelte/store';
 import Wizard from './wizard.svelte';
+import { Region } from '@appwrite.io/console';
 
 export const formData = createMigrationFormStore();
 
@@ -18,5 +19,6 @@ export function openMigrationWizard() {
 }
 
 export const selectedProject = writable<string>(null);
+export const selectedRegion = writable<Region>(Region.Fra);
 
 export const provider = createMigrationProviderStore();